HOME > > > 英文フォントを気にせずブラウザ表示できる「Google Fonts」を使ってWebフォントを設定する

英文フォントを気にせずブラウザ表示できる「Google Fonts」を使ってWebフォントを設定する

googlefonts

「Google Fonts」を使って英文フォントをかっこよくしちゃう

Webではパソコン内にインストールされているフォントしかブラウザに表示できません。
この英文フォントかっこいーなーなんて設定しても相手が持っていなければ見えてませんね。
そこで「Google Fonts」を使って任意のフォントを設定しちゃいましょう。
ちなみにアカウント登録なども無いのでどなたでも使用できます。

「Google Fonts」の設定方法

「Google Fonts」サイトを開きます

下記のURLからGoogle Fontsサイトを開きます。

https://www.google.com/fonts/

GoogleFonts

head内にCSSを追加する

head内にCSSの記述を追加します。下の画像の部分をクリック。

css追加

「3. Add this code to your website:」の部分にあるCSSの記述をコピーして~内に貼り付けてください。


<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

css追加

CSSにfont-familyを追加します

CSSがかかれている(外部ファイルもしくはhead内)部分に「4. Integrate the fonts into your CSS:」部分のfont-familyを追加します。

font-family

p{
 font-family: 'Open Sans', sans-serif;
}

ここでは「P」に設定してみました。こうすると「p」内に書かれた英文は設定されたフォントになります。
簡単。これで設置は完了です。
今まで画像にしていた英文フォントもこれで使いやすくなりますね。
フォント数は沢山あるので、イメージに合ったフォントを試してみてください。

こんな沢山の中から探すのかウンザリ。。。という方は絞り込み検索を使おう

ある程度使いたいフォントのイメージが決まっている方は単純に見ていくのは骨が折れる作業です。 そこで左にある絞り込みを使って見つけたいイメージのフォントに近づけましょう。

絞り込み

All categoriesからはフォントの種類を選択

  • Serif 「明朝体」
  • Sans-serif 「ゴシック体」
  • Display 「装飾フォント」
  • Handwriting 「筆記体・草書体」
  • Monospace 「等幅フォント」

Thickness~はフォントの太さ等を絞り込み

  • Thickness 「太さ」
  • Slant 「傾斜」
  • Width 「幅」

フォント名を知りたい

フォント名を知りたい・フォント名で見たいという方は「Preview Text」セレクトボックスから「Font Name」を選択するとフォント名で表示されます。

フォント名

これだけあれば英文フォントは迷わない

これだけあれば英文フォントは迷わず使えそうです。
どーしてもって場合は画像で対応ですね。それはしゃーない。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

フォントの記事を読んだ人にオススメ