プラカンブログSTAFF BLOG

2016.10.06

超便利!「Google Fonts」の使い方

こんにちは。デザイナーのSUZUKIです。
以前、WEBフォント「Noto Sans」の使い方を紹介しましたが、
今回は「Noto Sans」を提供している「Google Fonts」というサービスを紹介します。

「Google Fonts」とは

Goolgeが提供しているWebフォントサービスです。
クラウド上に保存された大量のフォントから、お好みのフォントを選び、設定が可能です。
すごいことに、すべて無料で利用でき、商用利用にも対応しています。
制作会社にはありがたいサービスです。
ちなみに現在は808のフォントファミリーが登録されています。

使い方

まずは「Google Fonts」にアクセス。
https://fonts.google.com/

画面1

フォントファミリーが決まっている場合は(1)のところにフォント名を入れると、指定のフォントが(3)に表示されます。
フォントが決まっていないなら(2)の「Categories」からセリフ、サンセリフなどを選択。
また「Sorting」からは人気順、アップ順などを選べ、「Languages」からは英語、アラビア語など言語を選べます。
(2)で選んだ内容のフォントが(3)に表示されるので、お好みのフォントを探します。

 

画面2

選んだフォントの詳細画面になります。
今回は例として「Oswald」で紹介します。
(1)のStylesで確認。
「Type here to preview text」に実際使う文字を入れて、文字サイズを指定して確認しましょう。
問題なければ(2)のボタンをクリック。

 

画面3

選んだフォントが登録され、画面下部に(1)エリアがでてくるので、クリックします。

 

画面4

フォントの詳細設定画面になります。
(1)をクリックしてフォントウェイトの指定をします。

 

画面5

(1)で必要なフォントウェイトを選択します。
ウェイト数が増える分、通信速度が遅くなるので、必要なものだけにするように心がけましょう。
今回は「regular」と「bold」の二つを指定しました。
(2)をクリックし、元の画面に戻ります。

 

画面6

これでフォントの設定は終わりです。

あとは実際のhtmlの<head>内に(1)を記述します。

<link href="https://fonts.googleapis.com/css?family=Oswald:400,  700" rel="stylesheet"> 

次にスタイルシート内の使いたい場所に(2)を指定します。

h1 {
  font-family: 'Oswald',   sans-serif;
  font-weight: bold;
}
p {
  font-family: 'Oswald',   sans-serif;
  font-weight: regular;
}

例としてh1タグに「bold」、pタグに「regular」のウェイトを指定しています。
あとは表示がちゃんとできているか確認しましょう。
以上が使い方の説明になります。

まとめ

何といってもフォントファミリー数が多いので、
欧文であれば、希望のフォントに出会えるはずです。

また「Noto Sans」の時と同様に導入もとても簡単ですね。
欧文フォントセットなので、文字数も少なく、
通信速度もそこまで気にしなくても大丈夫です。

それでもフォントセット多用は避けたほうがいいでしょう。
フォントを厳選し、2、3個に抑えるのがいいと思います。

サイトのターゲットや環境を考慮し、どんどん取り入れてみてはいかがでしょうか。
そのうちオススメのフォントファミリーを紹介できればなと。

参考リンク

下記サイトは参考にしたサイトになります。
詳しく知りたい方はどうぞ。

http://oxynotes.com/?p=8121
http://photoshopvip.net/90333

http://lahtnas.hateblo.jp/entry/google-fonts

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc (鈴)

この記事は、SUZUKI が書きました。