font-display descriptor
font-display は @font-face 内で使用し、フォントのダウンロード中にテキストを非表示にする（block）か、フォールバックフォントで表示する（swap）か、あるいは条件付きで切り替える（fallback / optional）かを指定する。swap が最も一般的で、CLS を最小化できる。
概要
font-display は @font-face 内で使用し、フォントのダウンロード中にテキストを非表示にする（block）か、フォールバックフォントで表示する（swap）か、あるいは条件付きで切り替える（fallback / optional）かを指定する。swap が最も一般的で、CLS を最小化できる。
対応ブラウザ
デスクトップ
Chrome 60+
Edge 79+
Safari 11.1+
Firefox 58+
モバイル
Chrome Android 60+
Safari iOS 11.3+
Firefox Android 58+
基本構文
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 を推奨。