Webフォントの「一瞬の空白」を制す：FOIT/FOUT対策の現場的解法
フロントエンド開発の現場で、ふと自社サイトをリロードした際、一瞬だけ文字が消えたり、あるいはガクッとフォントが切り替わったりする現象に遭遇したことはないだろうか。
「あ、またFOIT/FOUTが起きているな」と横目に流してはいないだろうか？
Webフォントの読み込みは、ただファイルをサーバーから持ってくるだけの単純な話ではない。ブラウザの描画パイプラインと、ネットワークのラグが織りなす「タイミングの戦い」だ。今日は、中級エンジニアが避けて通れない、このフォント読み込みの裏側と、実務で使える「一撃必殺」の対策を深掘りしていこう。
—
なぜ「一瞬の空白」や「文字化け」が起きるのか
まず、ブラウザが裏側で何をしているかを知る必要がある。
1. FOIT (Flash of Invisible Text): ブラウザがフォントファイルを読み込むまで、文字を「透明」にして待機させる現象。特にSafariやChromeのデフォルト挙動でよく見られる。ユーザーには、テキストが読み込まれるまでそこが空白に見えるため、体感的な離脱率に直結する悪の根源だ。
2. FOUT (Flash of Unstyled Text): フォントが読み込まれるまでの間、システムフォント（代替フォント）で一時的に表示し、準備ができ次第Webフォントに切り替える現象。文字は見えているが、フォントが切り替わった瞬間にレイアウトがガタつく「Layout Shift」を引き起こす。
ブラウザは「どのフォントを使うか」を解析し、CSSの `font-family` を見て「お、このWebフォントが必要だな」と判断する。しかし、ネットワーク環境が悪ければ、そのダウンロードが終わるまでブラウザは「描画を待機するか、取り急ぎシステムフォントで出すか」という究極の選択を迫られるわけだ。
—
現場の最適解：font-displayプロパティを使いこなす
この戦いを制御するのが、CSSの `@font-face` 内で定義できる `font-display` プロパティだ。これが登場する以前は、JavaScriptで `FontFaceObserver` を回したりと泥臭い実装をしていたが、今はこれ一本でかなりコントロールできる。
実務で最も推奨される設定は `font-display: swap;` だ。
/ 現場で即採用できるベストプラクティスなフォント読み込み定義 /
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘/fonts/my-font.woff2’) format(‘woff2’);
font-weight: 400;
font-style: normal;
/
- swap:
- 読み込み完了まではシステムフォントを表示し、
- 完了次第、Webフォントに切り替える。
- FOITを完全に回避できるため、ユーザー体験（LCP）において最も無難な選択。
/
font-display: swap;
}
なぜ `swap` が最強なのか？
「文字が消える（FOIT）」のは、ユーザーにとって「サイトが壊れている」と誤解される可能性がある。`swap` を使えば、たとえフォントが切り替わる際のガタつき（FOUT）があったとしても、まずはコンテンツの中身を読ませることができる。
—
実践Tips：レイアウトシフトを最小限に抑える
`swap` を使うと、どうしてもフォント切り替え時の「ガタつき」が発生する。これを完全にゼロにするのは難しいが、「フォントサイズや行間を調整する」ことで被害を最小限にできる。
/ インライン要素やテキスト装飾への適用例 /
.content-text {
font-family: ‘MyCustomFont’, sans-serif;
/
- 重要: Webフォントとシステムフォントで文字幅が違うと
- 切り替え時にガタつきが大きくなる。
- size-adjustやascent-overrideを併用して、
- フォントの表示領域を強制的に合わせるのがプロの技。
/
size-adjust: 100%;
}
strong {
/ 太字フォントの読み込み遅延もfont-displayで管理しよう /
font-weight: 700;
}
最後に：完璧を追い求めすぎないこと
Webフォントの読み込みにおいて、「完璧に遅延なく表示させる」ことは、物理的に不可能だ。
我々エンジニアがすべきことは、フォントが読み込まれるまでの数秒間、いかにユーザーのストレスを減らすかという「体験のデザイン」である。
1. まずは `font-display: swap;` を基本にする。
2. それでもガタつきが気になる箇所には、CSSで代替フォントとのサイズ調整を施す。
3. そもそもフォントサイズが極端に大きくないか、本当にWebフォントが必要か検討する。
これらを押さえるだけで、あなたの書くCSSは、ただのコードから「ユーザーを導くUI」へと昇華される。明日からの実装で、ぜひ意識してみてほしい。現場からは以上だ。
コメント