CSSでフォント表示を高速化——font-display の利用方法

CSSの font-display プロパティは、フォントのダウンロード及び準備状況に応じて、どのようにフォントを表示するかを指定します。適切な値を指定することで、体感的なページの表示速度の向上が期待できます。

フォント表示のタイムライン

特定のダウンロードされたフォントを最初に使用しようとすると、フォントダウンロードタイマーが開始されます。このタイマーは、フォントに関連付けられた3つの期間(ブロック期間、スワップ期間、および失敗期間)を進み、フォントを使用する要素のレンダリング動作を決定します。

  1. ブロック期間 – 最初の期間で、フォントが読み込まれていない場合、それを使用しようとする要素は、代わりに不可視のフォールバックフォントでレンダリングされます。ブロック期間中にフォントが正常に読み込まれると、フォントが通常どおり使用されます。
  2. スワップ期間 – ブロック期間の直後に発生する2番目の期間で、フォントが読み込まれていない場合、それを使用しようとする要素は、代替となるフォールバックフォントでレンダリングされます。スワップ期間中にフォントが正常に読み込まれると、フォントは通常どおり使用されます。
  3. フォント障害期間 – スワップ期間の直後に発生する3番目の期間で、この期間の開始時にフォント が未だ読み込まれていない場合、読みこみが失敗となり、通常のフォントフォールバックが発生します。

font-display で指定できる値

CSS の font-display プロパティの指定
  1. @font-face {
  2. font-family: Roboto;
  3. src: url("../font/roboto/Roboto-Regular.woff2") format("woff2"),
  4. url("../font/roboto/Roboto-Regular.woff") format("woff"),
  5. url("../font/roboto/Roboto-Regular.ttf") format("truetype");
  6. /* 次のいずれかを指定 */
  7. font-display: auto;
  8. font-display: block;
  9. font-display: swap;
  10. font-display: fallback;
  11. font-display: optional;
  12. }
font-display: auto;
ブラウザ規程の動作。ほとんどブラウザーでは block と同様の動作。
font-display: block;
短いブロック期間と無限のスワップ期間を与えます。
つまり、ブラウザは読み込まれていない場合は最初に不可視テキストを描画しますが、読み込まれるとすぐにフォントを入れ替えます。
この値は、ページを使用可能にするために特定のフォントでテキストをレンダリングする必要がある場合にのみ使用するときに指定します。
font-display: swap;
推奨。非常に短いブロック期間と無限のスワップ期間を与えます。
つまり、フォントが読み込まれていない場合、ブラウザーはフォールバックでテキストをすぐに描画しますが、読み込まれるとすぐにフォントを交換します。
font-display: fallback;
非常に短いブロック期間と短いスワップ期間を提供します。
つまり、フォントは、読み込まれていない場合、最初はフォールバックでレンダリングされますが、読み込まれるとすぐに交換されます。ただし、時間が経過しすぎると、代わりにページの残りの期間にフォールバックが使用されます。
font-display: optional;
非常に短いブロック期間と0秒のスワップ期間を与えます。
font-display の各値のタイムライン

Google Fonts で利用するには

従来の Gogle Fonts では、こうのような CDN リンクを記述していました。

  1. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

現在では、次のように案内されます。

Google Fonts で font-display を指定する
  1. <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Google Fonts では、 &display=swap のようにパラメーターを指定することで、font-display と同じ効果が得られます。swap 以外の値もサポートされますが、基本的に swap を指定することをお勧めします。