記事内に商品プロモーションが含まれる場合があります
今回は、Webサイトやブログで大活躍するGoogle Fonts（グーグル・ウェブフォント）の導入方法と使い方をまとめていきます。HTMLとCSS初心者の方でも分かるように丁寧に解説していきます
1. Google Fontsとは？
完全無料でWebフォントを使用できるサービスのことです。商用利用でも無料です。
1-1. Webフォントとは？
サーバーからフォントデータを読み込んで、ブログやWebサイトに表示させる仕組みのことです。
通常のフォントだと…
通常のフォントの場合、Webページを閲覧する端末にインストールされているフォントしか表示させることができません。
WindowsかMacかiPhoneかAndroidかによって標準搭載されているフォントも異なるため、統一した文字を表示させることができないわけですね。
Webフォントなら…
一方でWebフォントであれば、サーバーから読み込むため、どの端末でも共通のフォントを表示させることができます。
1-2. ページの読み込み速度は遅くなる？
使用するフォント種類が増えるほど重くなります。とはいえ、Googleの高速サーバーから読み込むことができるので、数種類の英語Webフォント使用であれば気にならないはずです。
1-3. Google Fontsに日本語はあるの？
【2019年2月追記】日本語フォントもGoogleフォントのトップから選択して使えるようになりました。
サイドバーの「Language」で「Japanese」を選択すれば、日本語フォントのみを表示することができます。使い方や設定方法などは英語のフォントと同じです。ただし、フォントファイルが数MB〜数十MBとかなり重くなってしまうことがあるので注意しましょう。
日本語はひらがな・カタカナに加えて無数の「漢字」まで読み込まなければならないため重くなるわけですね…。とはいえ、Googleフォントは読み込みが最適化されているため（そのページで使用されるフォントを中心に読み込むなど）、影響はあまり大きくないかもしれません。
英語はGoogle Fonts、日本語は通常の指定でもOK
表示速度を優先したい方は「日本語は通常のフォントを使い、アルファベットだけWebフォントで表示させる」のも1つの手です。これだけで見栄えがグッと良くなることもあります。
フォント（font-family）の指定の仕方はこちらの記事で詳しく解説しています。
2. Google Fontsの使い方
ここからはGoogle Fontsの導入手順と使い方を解説していきます。
手順1. 利用ページにアクセス
まずはこちらのページを開きましょう。Google Fonts
利用できるフォントがずらっと表示されます。下にスクロールすればフォントがどんどん表示されます。
この中から使いたいフォントを選びます。フォントの探し方については後ほど説明します。とりあえず導入手順をちゃちゃっと解説しちゃいます。
手順2. 使用するフォントを選ぶ
使いたいフォントがあったときは右上のをクリックします。
すると画面下側のリストの中に追加されます。使いたいフォントが複数あるときはそれもで追加しましょう。
をクリックすれば削除することができます。
手順3. 太さなどのスタイル設定をする
追加が済んだら、画面下の黒いバーの「-」をクリックしましょう。これで追加した文字の設定ウィンドウが開きます。
ウィンドウの上部には追加されているフォントが一覧で表示されます。
その下にある[CUSTOMIZE]をクリックします。ここで太字や斜体を使うかどうかを決めることができます。
初期設定では普通の大きさのフォントしか使わない設定になっています。太字や斜体を使いたい場合は、使いたいスタイルにチェックを入れます。
スタイル数が多くなるほど読み込みデータが重くなるので、本当に使うものにだけチェックを入れましょう。
手順4. HTMLにフォントの読み込みコードを貼る
スタイル設定ができたら[EMBED]をクリックします。
下側に<link rel...というコードが載った部分があるはずです。これをまるっとコピーします。
コピーしたコードは<head>〜</head>の中のどこかに貼ります。ただしブログサービスによって貼り方は少し異なります。
link rel〜を貼る場所
- WordPress：[ダッシュボード]⇒[外観]⇒[テーマエディター]⇒右側のバーの[header.php]⇒headタグ内
- はてなブログ：[設定]⇒[詳細設定]⇒[headに要素を追加]の枠内にコードを貼付け
- Livedoorブログ：[ブログ設定]→[PC]→[カスタマイズ]→[HTMLファイル]⇒headタグ内
- FC2ブログ：[設定]⇒[テンプレートの設定]⇒[◯◯のHTML編集]⇒headタグ内
- Blogger：[テンプレート]⇒[HTMLの編集]⇒headタグ内
【参考】CSSから読み込む場合
HTMLをいじらずにCSSから読み込むこともできます。その場合は@importをクリックして表示されるコードをまるっとコピーしてCSSファイルのどこかに貼りましょう（@charset〜のすぐ下で良いかと思います）。
手順5. CSSでfont-familyを指定
あとはCSSでfont-familyに使いたいフォント名を記載するだけです。もう一度Google Fontsに戻ります。
ウィンドウの下側にある「font-family:’◯◯’」というところでフォント名が確認できます。これをコピーしてfont-familyに追加します。
font-familyの指定の仕方
こちらの記事を参考にすると良いかと思います。
もしCSSにfont-family:〜が書かれている場合、その中の１番先頭にフォント名を貼り付けます。
例 body {font-family: ‘Quicksand’, ‘ヒラギノ角ゴシック’, ‘メイリオ’ ,sans-serif;}
ページ全体にWebフォントを使いたい場合はbody {font-family: 'フォント名',...}というように書きます。見出しにだけ使いたい場合などはh2 {font-family: 'フォント名',...}というように書きます。
これらのWebフォントは日本語を表示できないので、日本語のフォント名と合わせて書くのがおすすめです。
手順6. 表示される！
これで導入完了です。ページを読み込めばWebフォントが表示されるようになります。参考：CSSのデザイン変更が反映されない時の対処法
【参考】太字で表示させたいときは？
Webフォントを太字で表示させたいときにはCSSで指定をします。font-family:〜;と合わせてfont-weight:boldと書けば太字で、font-weight:lighterとすれば細字で表示されます。詳しくはこちらの記事が参考になるはずです。
3. 効率的なWebフォントの探し方
Google Fontsにはたくさんの種類のWebフォントが登録されています。目的に合ったフォントを効率的に探せるようにフィルターを使いこなしましょう。
まず、画面右上の虫メガネのアイコンをクリックします。
すると検索のフィルターメニューが表示されるようになります。1つずつ見ていきましょう。
3-1. 書体でフィルターをかける
SerifやSans Serifのチェックを外すことで「明朝体のフォントだけ表示させる」というようなことができます。
Serifは明朝体、Sans Serifはゴシック体、Displayというのは華やかな装飾のある書体、Handwritingは手書き文字、Monospaceは1文字の幅が全て同じフォントのことです。
3-2. 太さや斜体でフィルターをかける
フォントによって太字や斜体の数が異なります。太さを7種類から選べるフォントもあれば、太字を全く使うことのできないフォントもあります。以下の4つのフィルターを使うことで「ものすごく太いフォントだけ表示させる」ようなことができます。
- Number of styles：指定できるスタイルの数（太字と斜体の数）。
- Thickness：太さ。右につまみを動かせば太字のものだけ表示、左に動かせば細字だけ表示
- Slant：斜体。右につまみを動かすと斜体フォントだけが表示。右ほど斜め具合が強くなる
- Width：文字幅。左につまみを動かすと幅の小さいものだけ表示、右に動かすと幅の大きいものだけ表示
3-3. 人気順や新着順で並び替える
[Sorting]を変えることで並び順を変更することができます。
- Trending：トレンドのものから表示
- Popular：人気順で表示
- Date Added：新着順で表示
- Alphabetical：アルファベット順で表示
4. 例文の表示を変更する
Google Fontsではフォントごとにサンプル文字列が表示されています。この文字列は簡単にカスタマイズできます。
4-1. 文字列を変える
変えたい文字列にカーソルを当て、Deleteを押せば消えます。そのまま試したい文字を入力すればOKです。
4-2. 変えた例文を全フォントに適用
全例文を統一した方が比較しやすいですね。[APPLY TO ALL FONTS]をクリックすれば、全例文が同じ文字列になります。
4-3. 段落文で表示
初期設定では見出しっぽく例文が表示されています。[Sentense]をクリックして[Paragraph]を選べば、例文を段落文に変えることができます。
4-4. サンプル文字の大きさを変更
◯◯pxと表示されている部分のつまみを調整することで表示される文字の大きさを変えることができます。
4-5. 太さを変更
その左隣にある[Regular400]というところからはサンプル文字の太さを変えることができます。
最後に
Google Fontsをうまく使えばユニークでオシャレなWebサイトに見せることができます。とはいえ「オシャレ＝読みやすい」ではないので、読ませたい部分で使うときには注意が必要ですね。
