CSSの@font-faceでGoogle Fontsのwebフォントを利用する方法


webデザインでwebフォントを利用してデザインを構築していくことがよくあります。
そこで使えるのがCSSの@font-face規則です。

@font-face規則はwebフォントを利用するために用意された規則です。webフォントで有名なのがGoogle Fontsではないでしょうか。
他にもたくさん提供されているフォントや自作のフォントなどのデータを、CSSで読み込んで利用することができます。

webサイトのデザインでこだわりのあるフォントを利用すると、PhotoshopやIllustrator等で作成したデザインカンプから、webで表現できない場合があるので、こだわりのあるフォントの部分だけ画像で書き出すしかありません。
もちろん画像として扱っていくのは問題ないのですが、レスポンシブwebデザインに対応しようとすると、画像よりもできるだけHTMLのマークアップとCSSで表現したいところです。デバイス幅の可変を考えると圧倒的にマークアップでの表現がコントロールしやすいです。

そこで使えるのが@font-faceなのです。
webデザインの中でフォントのデザインはすごく重要ですからね。

webブラウザの対応状況も見てみましょう。
以下のサイトで確認できます。

Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/#search=font-face

Google ChromeやFirefox、Safari、Edgeといった主要ブラウザはだいたい対応していますね。

まずは、@font-faceの使い方の前に、
無料で多くのwebフォントを提供しているGoogle Fontsをサンプルで使っていくので、先にGoogle Fontsの使い方からご紹介します。


Google Fontsの使い方

Google Fontsは以下のサイトから、ソースコードを取得したりフォントデータをダウンロードしたりすることができます。

Google Fonts
https://fonts.google.com/

「Roboto」「Open Sans」「Lato」「Lora」といったセリフ体、サンセリフ体あたりは使いやすく、日本語の明朝体、ゴシック体に対応する人気があるフォントです。

ページ上部のオプションには、フォントの検索やフォントサイズ変更等ができますが、真ん中の「Sentence」の部分で自由にテキストを入れれば、そのテキストの表示が確認できます。
アルファベットはもちろん、日本語も対応しているフォントかどうかも確認できます。

Google Fontsの日本語対応フォントの確認



対象のフォントの「+」ボタンを選択することで、画面右下の選択済みツールに登録されます。
エリア全体を選択すると、フォントの詳細ページに飛びます。

Google Fontsの利用方法



フォントの詳細ページでは、フォントの太さやスタイルが細かく選択できます。
画面右上の「SELECT THIS FONT」を選択すれば、選択済みツールに登録されます。

Google Fontsの選択



登録されたフォントを確認すると、HTMLの埋め込みコードとCSSのfont-familyの指定コードが表示されています。HTMLでリンクを埋め込んで利用する場合はこちらを記述をコピーして使います。

今回は、@font-faceでフォントデータを読み込んで使いますので、右上のダウンロードボタンを選択してフォントデータをダウンロードします。

複数のフォントデータを選択したのであれば、1度に複数ダウンロードすることも可能です。
HTMLコードも複数の読み込みコードとなっています。

Google Fontsのダウンロード



フォントデータはダウンロードしておけば、PhotoshopやIllustratorでも利用してデザインを作成するといったこともできますね。

このあと@font-faceを使ってフォントを表示させてきますので、適当にフォントデータをダウンロードしておいてください。

3つほど使おうかなと思います。


@font-faceの使い方


では本題の@font-faceの使い方を見てみましょう。
まずは記述方法です。

「font-family」にwebフォント名、「src」にフォントURLを記述します。

CSS

@font-face {
  font-family: 'webフォント名';
  src: url('読み込むフォントデータのパス') format('フォーマット名');
}

.myfont {
  font-family: 'webフォント名', sans-serif; 
}


もし同じフォントデータで複数の形式を用意している場合は、カンマ区切りで指定できます。

CSS

@font-face {
  font-family: 'myfont';
  src: url('../fonts/myfont.woff') format('woff'),
       url('../fonts/myfont.ttf') format('truetype');
}

.myfont {
  font-family: 'myfont', sans-serif; 
}


@font-faceが対応していない場合は、font-familyの2番目、3番目の指定が有効となります。
ここまでは基本的な記述例です。

では実際に「Indie Flower」「Lobster Two」「M PLUS Rounded 1c」の3つのフォントデータを使って見ます。
サンプルではフォントがわかりやすいように、HTML要素にクラスを付けてフォントを指定しています。

HTML

<section>
  <p class="myfont-if">Example text... Example text... Example text...</p>
  <p class="myfont-lst">Example text... Example text... Example text...</p>
  <p class="myfont-mpl1c">Example text... Example text... Example text...</p>
</section>


CSS

@font-face {
  font-family: 'myfont-if';
  src: url('../fonts/IndieFlower-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'myfont-lst';
  src: url('../fonts/LobsterTwo-Regular.ttf') format('truetype');
}

.myfont-if {
  font-family: 'myfont-if', sans-serif;
}

.myfont-lst {
  font-family: 'myfont-lst', sans-serif;
}

@font-face {
  font-family: 'myfont-mpl1c';
  src: url('../fonts/MPLUSRounded1c-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'myfont-mpl1c';
  src: url('../fonts/MPLUSRounded1c-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

.myfont-mpl1c {
  font-family: 'myfont-mpl1c', sans-serif;
  font-weight: bold;
}



実際の表示結果がこちらです。

font-faceでのGoogle Fontsの利用



いくつか利用したいフォントがある場合、@font-faceの記述を増やしてHTML要素に指定したクラスに対してフォントを設定していくと良いでしょう。

M PLUS Rounded 1cでは同じwebフォント名で2つ記述しています。
フォントデータが複数ある場合、例えばRegularと太めのBoldと。
同じフォントで種類が違うデータを複数利用したい場合には、同じフォント名で2つ記述し、font-weightやfont-styleの指定で切り替えることができます。


余談


余談ですが、Google Fontsのリンクと@font-faceを両方使う場合もあります。

例えば、どの環境でも問題なくフォントを表示させたいとなると、Google Fontsのリンクを利用するのが確実です。しかしリンクの読み込みが遅いと最初だけフォントが表示されないことがあります。
これではアクセスしたユーザーにとってよくありません。しっかりコンテンツを表示しないとサイトから離脱することもあります。

そうした状況を避けるためには、Google Fontsのリンクと@font-faceの両方で対応していくことになります。

以下、「M PLUS Rounded 1c」を利用したサンプルになります。
まずはHTMLのheadタグ内にGoogle Fontsのリンクを記述します。

HTML

<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">



CSSでは今までどおり、フォント名とフォントURLを記述します。
そして@font-face内に「font-display: swap;」を記述します。

CSS

@font-face {
  font-family: 'myfont-mpl1c';
  src: url('../fonts/MPLUSRounded1c-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.myfont-mpl1c {
  font-family: 'M PLUS Rounded 1c', 'myfont-mpl1c', sans-serif;
  font-weight: normal;
}



font-displayは、フォントがダウンロード済みで利用できるかに基づいて、フォントの表示を決めていきます。
「swap」とすることで、フォントが利用可能となるまでの代替フォントが適用されます。
要するにフォントのリンクが読み込み中は、font-familyプロパティで指定された2つ目、3つ目のフォントが有効となり、読み込みが完了してフォントの取得できたらGoogle Fontsのリンクのフォントを表示する処理をしてくれます。

サンプルコードでは、読み込みが遅延している状態は、2番目の「myfont-mpl1c」が有効になり、読み込み完了すると「M PLUS Rounded 1c」が有効となります。
今回は同じフォントをリンクとフォントデータで対応しているので、読み込みが遅くても同じフォントがしっかり表示されます。

ちなみに、font-displayのwebブラウザの対応状況です。

Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/#search=font-display


確実に指定したフォントを利用するのであれば、Google Fontsのリンクを読み込み、読み込みが遅い時の処理として@font-faceを利用する。こちらはGoogle Fontsのリンクを読み込むので、その分若干、表示速度は遅くなります。

対応していないwebブラウザを無視するのであれば、@font-faceで自サーバのフォントデータを読み込み、font-familyで表示されないブラウザに対して無難なフォントを複数指定で記述する。
こちらですと、対していないブラウザを無視した分、Google Fontsの読み込みがないので、それだけwebサイトの表示速度は速くなります。

フォントを含め、デザインにこだわるのであれば、Google Fontsのリンクを読み込みつつ@font-faceで対応するのが良いでしょう。