Google Fontsの使い方：初心者向けに解説！

1. Google Fontsとは？

無料でWebフォントを使用できるサービスです。商用利用もできます。フォントの再配布などは、それぞれのライセンス条件を確認しましょう。

1-1. Webフォントとは？

サーバーからフォントデータを読み込んで、ブログやWebサイトに表示させる仕組みのことです。

通常のフォントだと…

端末にインストールされたフォントを指定する場合、Webページを閲覧する端末にそのフォントがある必要があります。

Windows・Mac・iPhone・Androidなどでは標準搭載のフォントが異なるため、端末内のフォントだけでは同じ書体になるとは限りません。

Webフォントなら…

Webフォントなら、サーバーから読み込んだ共通のフォントを各端末で使えます。ただし、読み込みに失敗した場合や対応する文字がない場合は、別のフォントへ切り替わります。

1-2. ページの読み込み速度は遅くなる？

読み込むフォントの種類や太さを増やすほど、通信量が増える場合があります。Google Fontsには形式などの最適化がありますが、速度への影響はフォントや通信環境にもよります。使うスタイルに絞り、実際のページで確認しましょう。

1-3. Google Fontsに日本語はあるの？

【2019年2月追記】日本語フォントもGoogle Fontsのトップから選択できるようになりました。現在も日本語対応フォントを探せます。次の画像は当時の画面です。

現在はフィルターの「Language」でJapaneseを選んで、日本語対応フォントを探せます。読み込みコードの取得とCSS指定は英語フォントと同じ流れです。日本語フォントには文字が多いため、必要な太さや使う文字などによって通信量が変わります。

日本語は、ひらがな・カタカナ・漢字など多くの文字を含みます。Google FontsのAPIはフォント形式やファイルの分割などを最適化しますが、常に全ての漢字を一括で読み込むわけではありません。使う文字が決まっている場合は、URLのtextパラメーターで必要な文字を指定する方法もあります。Googleがページ本文を自動で読み取って指定する機能とは別です。

英語はGoogle Fonts、日本語は通常の指定でもOK

表示速度を優先したい方は「日本語は通常のフォントを使い、アルファベットだけWebフォントで表示させる」のも1つの手です。これだけで見栄えがグッと良くなることもあります。
フォント（font-family）の指定の仕方はこちらの記事で詳しく解説しています。

2. Google Fontsの使い方

ここからはGoogle Fontsの導入手順と使い方を解説していきます。

手順1. 利用ページにアクセス

まずはこちらのページを開きましょう。Google Fonts

利用できるフォントがずらっと表示されます。下にスクロールすればフォントがどんどん表示されます。

この中から使いたいフォントを選びます。フォントの探し方については後ほど説明します。とりあえず導入手順をちゃちゃっと解説しちゃいます。

手順2. 使用するフォントを選ぶ

現在は使いたいフォントの詳細ページを開き、「Get font」で選択します。旧画面では右上のから追加していました。図はその当時の操作です。

選んだフォントは現在の選択一覧に追加されます。複数のフォントも同じように選べます。旧画面ではで追加すると、図のように画面下の一覧へ入りました。

旧画面ではで選択を解除していました。現在は選択一覧の、解除したいフォントの削除ボタンを使います。

手順3. 太さなどのスタイル設定をする

現在は選択一覧から「Get embed code」を開きます。図の黒いバーを開く操作は公開当時のものです。

現在も選択したフォントを一覧で確認できます。図は、公開当時の設定ウィンドウに並んだ使用フォントです。

図の[CUSTOMIZE]は旧画面のスタイル設定です。現在は「Get embed code」の各フォントで、使う太さやスタイルを選びます。表示される項目はフォントによって違います。

旧画面では初期設定で標準の太さだけを選択し、必要な太字や斜体を追加していました。現在は個別の太さや可変フォントの範囲を選べます。例えばQuicksandは太さ300〜700に対応し、斜体はありません。

読み込むスタイルや太さの範囲は本当に使うものに絞りましょう。可変フォントでは複数の太さが一つのファイルに入る場合もあり、スタイル数と通信量が必ず比例するわけではありません。

手順4. HTMLにフォントの読み込みコードを貼る

現在は「Get embed code」で「Web」を選び、読み込みコードを取得します。図の[EMBED]は公開当時のタブ名です。

現在のWeb設定でlink方式を選び、表示された読み込みコードをコピーします。例えばQuicksandの300・400・700を使うコードは<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;700&amp;display=swap" rel="stylesheet">です。図は旧コードの表示位置です。

コピーしたコードは<head>〜</head>の中のどこかに貼ります。ただしブログサービスによって貼り方は少し異なります。

手順5. CSSでfont-familyを指定

あとはCSSでfont-familyに使いたいフォント名を記載するだけです。もう一度Google Fontsに戻ります。

現在は「Get embed code」にあるCSSのfont-familyを確認して指定します。図は公開当時の表示位置です。クラス例のweightやuniquifierなどのプレースホルダーは、自分の値に置き換える必要があります。

font-familyの指定の仕方

こちらの記事を参考にすると良いかと思います。

CSSで既にfont-family: sans-serif;などを指定している場合は、使用するWebフォント名を先頭に追加します。後ろのフォントは、読み込めない文字や読み込み失敗時などの代わりになります。

例 body {font-family: 'Quicksand', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;}

ページ全体へ指定する例はbody { font-family: 'Quicksand', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; }です。見出しだけならh2 { font-family: 'Quicksand', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; }のように、対象を変えて指定します。子要素で別のfont-familyを指定している場合は、そちらも確認しましょう。

手順6. 表示される！

これで導入完了です。ページを読み込めばWebフォントが表示されるようになります。参考：CSSのデザイン変更が反映されない時の対処法

【参考】太字で表示させたいときは？

太字を指定するにはCSSのfont-family: 'Quicksand', sans-serif;と合わせてfont-weight: bold;を使います（boldは700）。font-weight: lighter;は、親から受け継ぐ太さに対する相対指定です。必ず特定の細字になるわけではないので、読み込む太さとフォントの対応も確認しましょう。詳しくはこちらの記事を参考にしてください。

3. 効率的なWebフォントの探し方

Google Fontsにはたくさんの種類のWebフォントが登録されています。目的に合ったフォントを効率的に探せるようにフィルターを使いこなしましょう。

現在は上部の「Search fonts」で名前を検索し、フィルターで条件を絞れます。図の右上の虫メガネを開く操作は公開当時のものです。

現在のフィルターには言語・書体・スタイル数などの項目があります。図は旧フィルターメニューです。以下では当時の項目と現在の操作を対応させて説明します。

3-1. 書体でフィルターをかける

現在はSerifやSans Serifなどの分類を選んで絞り込めます。図は、旧画面で分類のチェックを外す操作です。

Serifは文字の端に飾りがある書体で、日本語の明朝体に近い分類です。Sans Serifはその飾りがない書体でゴシック体に近い分類。旧Displayは見出し等に向く装飾書体、Handwritingは手書き風、Monospaceは文字幅が一定の書体です。現在はCalligraphyやAppearanceのMonospacedなど、分類名や配置が変わっています。

3-2. 太さや斜体でフィルターをかける

フォントによって使える太さや斜体が異なります。現在はPropertiesのNumber of stylesでスタイル数を絞り、個別のフォントページで太さ・斜体の対応を確認できます。次の4項目は旧画面のフィルターです。現在のメニューに同じ4つが並ぶわけではありません。

• Number of styles：旧画面では指定できるスタイル数。現在も同名の絞り込みがありますが、可変フォントのweight範囲は個別に確認します。
• Thickness：旧画面で太さを絞るつまみ。現在のメニューに同じ項目はなく、個別ページでweightを確認します。
• Slant：旧画面で傾きによる絞り込み。現在は個別ページで斜体等の対応を確認します。全フォントに斜体があるわけではありません。
• Width：旧画面で文字幅を絞るつまみ。現在は個別のフォントの幅や、対応する可変軸を確認します。

3-3. 人気順や新着順で並び替える

現在は「Sort by」で並べ替えます。図の[Sorting]は旧画面の表示です。次の旧4項目は、現在の項目と意味が対応しています。

• Trending：トレンドのものから表示
• Popular：旧画面の人気順。現在の「Most popular」に対応します。
• Date Added：旧画面の新着順。現在の「Newest」に対応します。
• Alphabetical：旧画面の名前順。現在の「Name」に対応します。

4. 例文の表示を変更する

Google Fontsではフォントごとにサンプル文字列が表示されています。この文字列は簡単にカスタマイズできます。

4-1. 文字列を変える

現在は一覧の「Preview text」や個別フォントのプレビューで、試したい文字を入力できます。GIFは旧画面で文字列を選び、Deleteで消して入力する操作です。

4-2. 変えた例文を全フォントに適用

同じ文字列を使うと、フォント同士を比較しやすくなります。現在は一覧のPreview textが共通の文字列に反映されます。GIFの[APPLY TO ALL FONTS]は公開当時のボタンです。

4-3. 段落文で表示

現在は個別フォントのプレビューで段落などの文字を確認できます。GIFは旧画面で[Sentence]から[Paragraph]へ切り替える操作です。

4-4. サンプル文字の大きさを変更

現在もプレビューの文字サイズを指定・調整できます。GIFは公開当時の、◯◯pxのつまみでサイズを変える操作です。

4-5. 太さを変更

現在は個別フォントのプレビューのweightやスタイルを選んで、太さを確認できます。旧画面では[Regular400]の欄から選んでいました。

最後に

Google Fontsをうまく使えばユニークでオシャレなWebサイトに見せることができます。とはいえ「オシャレ＝読みやすい」ではないので、読ませたい部分で使うときには注意が必要ですね。