font-display descriptor
font-display は @font-face アットルールの記述子で、フォントフェイスがダウンロード済みで利用可能であるかどうか、いつなのかに基づいて、どのようにフォントフェイスを表示するかを定めます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 60 | 79 | 58 | 11.1 | 60 | 11.3 | |
基本構文
CSS
@font-face {
font-family: "MyFont";
src: url("/fonts/myfont.woff2") format("woff2");
font-display: swap; /* fallback | block | optional | auto */
}ライブデモ
実務での使いどころ
-
初期表示の高速化
swap を使うことでフォント読み込み完了前でもフォールバックフォントでテキストを即座に表示できる。
-
Core Web Vitals 改善
optional を使うと、遅いネットワークではフォントダウンロードをスキップし、CLS と LCP を改善できる。
注意点
- swap は FOUT（Flash of Unstyled Text）が発生する。フォールバックフォントとの差が大きいとレイアウトシフトの原因になる。
アクセシビリティ
- block を使うとテキストが一時的に見えなくなるため、スクリーンリーダーのタイミングに影響する場合がある。swap または optional を推奨。