用語集 › 🕸️ Web › font-display
【フォントディスプレイ】

font-display とは？

💡 フォント読み込み中に文字が消える問題、たった1行で解決できる
📌 このページのポイント
font-display — Webフォント読み込み中の表示戦略 値 読み込み中 読み込み後 特徴 swap システムフォントで表示 Webフォントに切替 推奨 block テキスト非表示（FOIT） Webフォントで表示 文字が消える optional システムフォントで表示 遅ければ切替しない CLS=0 fallback 短時間だけ非表示 猶予期間内のみ切替 バランス型 @font-face内で font-display: swap; と指定 — Google Fontsもswapを推奨
font-displayの各値と表示挙動の比較
ひよこ ひよこ

Webサイトを開いたとき、一瞬テキストが見えなくなることがあるんだけど、あれは何？

ペンギン先生 ペンギン先生

それはFOIT（Flash of Invisible Text）と呼ばれる現象だよ。ブラウザがWebフォントのダウンロードを待っている間、テキストを非表示にしてるんだ。font-displayプロパティで制御できるよ

ひよこ ひよこ

font-display: swapってよく見るけど、どういう意味なの？

ペンギン先生 ペンギン先生

swapは「まずシステムフォント（端末に入ってるフォント）で表示して、Webフォントが読み込めたら差し替える」という戦略だよ。テキストが消えることがなくなるからFCPが改善するんだ

ひよこ ひよこ

でもフォントが切り替わるとガクッとずれたりしない？

ペンギン先生 ペンギン先生

いいところに気づいたね！swapだとフォント切り替え時にレイアウトシフトが起きることがある。それが気になるならoptionalを使う手もあるよ。optionalは通信が速ければWebフォントを使い、遅ければシステムフォントのまま表示する賢い戦略なんだ

ひよこ ひよこ

結局どれを使えばいいのかな？

ペンギン先生 ペンギン先生

多くの場合はswapで十分だよ。Google Fontsもデフォルトでswapをつけてるしね。ブランドフォントなどデザイン上どうしても必要ならblock、パフォーマンス最優先ならoptionalがおすすめ。size-adjustプロパティを併用するとフォント切り替え時のズレも軽減できるよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「font-display」って出てきたら「Webフォント読み込み中のテキスト表示戦略」と思えればだいたいOK！
📖 おまけ：英語の意味
「font-display」 ＝ フォント表示制御
💬 font（フォント）のdisplay（表示方法）を制御するCSSプロパティで、文字が見えなくなる問題を防ぐんだよ
🔗 あわせて読みたい
← 用語集にもどる