Webフォントの最適化02「font-display」

本記事では、前回の記事の知識を前提としています。以下からお読みいただけます。

前回の記事：Webフォントの最適化01「FOIT・FOUT」

CSS の @font-face ルールの中に、font-display という記述子があります。このプロパティではフォントデータの読み込みが完了するまでの間、どのようにテキストを表示するかを定義できます。

font-display には、以下の仕組みがあります。

まずブロック期から始まり、その間にフォントの読み込みが完了しなければスワップ期に移行し、それでも読み込みが完了しなければ読み込み失敗期という順番です。

これにより、フォントデータの読み込み時間に応じて表示を制御することができます。
十分に短い場合は font-display: block でブロック期を設けて FOUT を抑える、読み込み時間が長い可能性がある場合は font-display: swap でスワップ期を設けて FOIT を抑えるというように指定します。

また、表示するコンテンツの性質も考慮するとより効果的です。

例えば、本文やブログといった、FOIT リスクが高い要素やコンテンツは、 font-display: swap で読み込み中でもテキストが表示されるのが良いでしょう。

逆に、アイコンフォントといったそのフォントである必要があるもの、ヒーローイメージ、ランディングページといったブランドイメージが大事な要素やコンテンツは font-display: block でブロック期を設けて FOIT を抑えるのが良いでしょう。

参考

（LN）