menu
menu

キーワード検索

 

9月更新・前月(8月)の人気記事トップ10 - 9/2/2019

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. (圏外↑) 【2019年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
  4. ( 3 ↓) 【jQuery】jQueryでドロップダウンメニュー
  5. ( 4 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 7 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  7. ( 5 ↓) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  8. ( 6 ↓) 【Mac】Safariでソースコードを見る方法
  9. ( 8 ↓) 【制作Tips】画面解像度一覧表
  10. (圏外↑) 【jQuery】入門2. jQueryをHTMLに組み込む
このエントリーをはてなブックマークに追加

【CSS3】いい感じな英語フォントでWebフォント

【CSS3】いい感じな英語フォントでWebフォント

こんにちは(・∀・)

前回の【CSS3】いい感じな日本語フォントでWebフォントで良い感じの日本語フォントをご紹介しました。今回は英語版となります。

いつも言ってますが、ここでいう「いい感じ」というのは、字体ももちろんそうですが、フリーで個人・商用利用も可のことを言います。

Webフォント

Webフォントの指定方法はこちらのページ@font-faceを参考にしてください。

1. Alaska Free Font

【CSS3】いい感じな英語フォントでWebフォント

Alaska Free Font

ページ内の「Free Download」をクリック。ダウンロードページへ移動したらもう一度「Free Download」をクリック。するとファイルが自動でダウンロードされます。Alaska Free Fontは大文字のみの対応です。

ダウンロードしたファイルを解凍、「Alaska Font.ttf」をfont-familyで指定。

サンプルデモ

The font of this sample demo has been downloaded by (Alaska Free Font), and (Alaska Font.ttf) is uploaded to a server and used as a web font.

2. Classical Monoline Script Font

【CSS3】いい感じな英語フォントでWebフォント

Classical Monoline Script Font

ダウンロードはページ中程の「Subscribe to Unlock」欄にメールアドレスを入力して「UNLOCK NOW」をクリックして送信。送られてきたメール内の「Download Now」をクリックするとファイルがダウンロードされます。

ダウンロードしたファイルを解凍、「Classical.ttf」をfont-familyで指定。

サンプルデモ

The font of this sample demo has been downloaded by (Classical Monoline Script Font), and (Classical.ttf) is uploaded to a server and used as a web font.

3. Extra Cheese Font Collection

【CSS3】いい感じな英語フォントでWebフォント

Extra Cheese Font Collection

ダウンロードはページ中程の「Subscribe to Unlock」欄にメールアドレスを入力して「UNLOCK NOW」をクリックして送信。送られてきたメール内の「Download Now」をクリックするとファイルがダウンロードされます。Extra Cheese Font Collectionは大文字のみの対応です。

ダウンロードしたファイルを解凍、「ExtraCheese-Regular.ttf」をfont-familyで指定。

サンプルデモ

The font of this sample demo has been downloaded by (Extra Cheese Font Collection), and (ExtraCheese-Regular.ttf) is uploaded to a server and used as a web font.

4. Highlander Marker Script Font

【CSS3】いい感じな英語フォントでWebフォント

Highlander Marker Script Font

ダウンロードはページ中程の「Subscribe to Unlock」欄にメールアドレスを入力して「UNLOCK NOW」をクリックして送信。送られてきたメール内の「Download Now」をクリックするとファイルがダウンロードされます。

ダウンロードしたファイルを解凍、「Highlander.ttf」をfont-familyで指定。

サンプルデモ

The font of this sample demo has been downloaded by (Highlander Marker Script Font), and (Highlander.ttf) is uploaded to a server and used as a web font.

5. Homemade Brush Script Typeface

【CSS3】いい感じな英語フォントでWebフォント

Homemade Brush Script Typeface

ダウンロードはページ中程の「Subscribe to Unlock」欄にメールアドレスを入力して「UNLOCK NOW」をクリックして送信。送られてきたメール内の「Download Now」をクリックするとファイルがダウンロードされます。

ダウンロードしたファイルを解凍、「Homemade One.ttf」をfont-familyで指定。

サンプルデモ

The font of this sample demo has been downloaded by (Homemade Brush Script Typeface), and (Homemade One.ttf) is uploaded to a server and used as a web font.

6. Medel Font (Free)

【CSS3】いい感じな英語フォントでWebフォント

Medel Font (Free)

ダウンロードはページ下段の「Download Medel」をクリックするとファイルがダウンロードされます。

ダウンロードしたファイルを解凍、「Medel.ttf」をfont-familyで指定。

サンプルデモ

The font of this sample demo has been downloaded by (Medel Font (Free)), and (Medel.ttf) is uploaded to a server and used as a web font.

7. Plebis Free Font

【CSS3】いい感じな英語フォントでWebフォント

Plebis Free Font

ダウンロードはページ中程の「DOWNLOAD」をクリックするとダウンロードページへ移動します。ダウンロードページ内の「ダウンロード」ボタンをクリックするとファイルがダウンロードされます。

ダウンロードした「PLEBIS.otf」をfont-familyで指定。

サンプルデモ

The font of this sample demo has been downloaded by (Plebis Free Font), and (PLEBIS.otf) is uploaded to a server and used as a web font.

8. Stay Classy - Free Font

【CSS3】いい感じな英語フォントでWebフォント

Stay Classy - Free Font

ダウンロードはページ上段にある「DOWNLOAD」をクリックするとダウンロードページへ移動します。ダウンロードページ内の「Download」ボタンをクリックするとファイルがダウンロードされます。

ダウンロードしたファイルを解凍、「Stay Classy SLDT.ttf」をfont-familyで指定。

サンプルデモ

The font of this sample demo has been downloaded by (Stay Classy - Free Font), and (Stay Classy SLDT.ttf) is uploaded to a server and used as a web font.

9. Vindica Rebel Brush Font

【CSS3】いい感じな英語フォントでWebフォント

Vindica Rebel Brush Font

ダウンロードはページ中程の「Subscribe to Unlock」欄にメールアドレスを入力して「UNLOCK NOW」をクリックして送信。送られてきたメール内の「Download Now」をクリックするとファイルがダウンロードされます。

ダウンロードしたファイルを解凍、「Vindica.ttf」をfont-familyで指定。

サンプルデモ

The font of this sample demo has been downloaded by (Vindica Rebel Brush Font), and (Vindica.ttf) is uploaded to a server and used as a web font.


参考サイト

商用利用OK!2018年にリリースされた無料フォント40

関連リンク

【CSS3】いい感じな日本語フォントでWebフォント
@font-face【CSS3リファレンス】

  • CSS3 Web Font
このエントリーをはてなブックマークに追加