フォントは「表示の聖域」か、それとも「レンダリングの足枷」か
Webエンジニアとしてキャリアを積んでいくと、必ず一度は「フォントが読み込まれるまでの数秒間、文字が消える現象（FOIT）」に頭を悩ませる。ユーザーが最初の数秒で直感的に感じる「重さ」や「不安定さ」の正体は、実はブラウザのレンダリングパイプラインにおける極めて繊細な同期問題だ。
今日は、`font-display`という小さなプロパティを入り口に、ブラウザが裏側でどれほど必死に計算し、時には派手に転んでいるのか、その深淵を覗いてみよう。
—
レンダリングパイプラインとフォントの「非同期の罠」
ブラウザがHTMLをパースし、DOMとCSSOMを構築してRender Treeを組み立てる際、フォントは常に「後回し」にされる存在だ。
ブラウザのレンダリングエンジン（BlinkやWebKitなど）にとって、フォントの読み込みは「メインスレッドをブロックすべきか、それとも後で再描画（Relayout/Repaint）を強いるか」という苦渋の決断を伴う。
FOIT (Flash of Invisible Text) の正体
デフォルトの挙動では、多くのブラウザはフォントが読み込まれるまでテキストを隠す。これは「フォントが適用される前の崩れたレイアウト」を見せないための配慮だが、モバイルネットワーク環境では致命的なUXの欠陥となる。
FOUT (Flash of Unstyled Text) とレイアウトシフト
`font-display: swap` を使うと、まずシステムフォントで即座に描画し、Webフォントが降ってきた瞬間に差し替える。しかし、ここで問題になるのが「レイアウトシフト」だ。フォントのメトリクス（文字の幅や高さ）が少しでも異なれば、テキストの高さが数ピクセル変動し、ページ全体のDOM要素がガタガタと動く。これが累積レイアウトシフト（CLS）のスコアを悪化させ、Core Web Vitalsを蝕む。
—
font-display の戦略的選択
`font-display` は単なるCSSプロパティではない。これはブラウザのレンダリングエンジンに対する「待機ポリシーの指示書」だ。
- `auto`: ブラウザ任せ。多くの場合、FOITが発生する。
- `block`: 短いブロック期間（約3秒）と無限の交換期間。最優先だが、低速回線では死を意味する。
- `swap`: FOUTを許容する。パフォーマンス的には最強だが、CLS対策が不可欠。
- `fallback`: 短いブロック期間と短い交換期間。フォントが遅ければ最初から諦めてシステムフォントで通す。
- `optional`: 極めて賢い選択肢。フォントがキャッシュになければ、そのページロード中はWebフォントを読み込もうとすらしない。
実務レベルでの「最適解」の構成例
私が現場で推奨するのは、`swap` をベースにしつつ、`preload` と `size-adjust` を組み合わせる手法だ。
/
- 重要なポイント: @font-face定義で font-display: swap を指定する。
- これにより、ブラウザはフォントダウンロードを待たずにレンダリングを開始する。
/
@font-face {
font-family: ‘Inter’;
src: url(‘/fonts/Inter.woff2’) format(‘woff2’);
font-display: swap;
/
- 重要: size-adjustでシステムフォントとのサイズ差を埋める。
- これにより、Webフォント読み込み完了時のレイアウトシフトを最小化できる。
/
size-adjust: 100%;
ascent-override: 90%;
}
—
現場の泥臭い知見：フォントのメモリ負荷と最適化
上級エンジニアであれば、フォントファイル自体がレンダリングの重荷であることも忘れてはならない。巨大な日本語フォントを安易に読み込めば、GPUのメモリ（VRAM）を圧迫し、レンダリングパイプラインの後半である「コンポジット（合成）」のフェーズで、低スペックなデバイスがカクつき始める。
パフォーマンスを極限まで高めるためのチェックリスト
1. サブセット化の徹底: 不要な漢字や記号を含んだ数MBのフォントを読み込んでいないか？ `unicode-range` を使用して、必要な文字範囲だけをロードさせる戦略を立てる。
2. `preload` の乱用を避ける: すべてのフォントを `preload` すると、画像やスクリプトとの帯域競合が発生する。優先度の高いヒーローセクションのフォントだけに絞るべきだ。
3. `font-synthesis` の活用: ブラウザに勝手なボールドやイタリックの生成を許すと、レンダリング負荷が跳ね上がる。明確に指定して制御する。
/ ブラウザの自動的な太字生成などを抑制してレンダリングコストを管理 /
h1 {
font-synthesis: none;
}
—
最後に：完璧なレンダリングを目指すために
ブラウザのレンダリングエンジンは、常に「速さ」と「美しさ」の間のトレードオフを計算している。`font-display` を正しく設定することは、ブラウザの意思決定プロセスに、あなたの開発者としての意志を介入させることと同義だ。
「とりあえずWebフォントを読み込む」という思考停止を卒業し、ネットワークの状態やデバイスの能力を想像しながら、一文字の描画に至るまでのパスを最適化する。それが、真に堅牢で、かつユーザーにとって心地よいWeb体験を構築する唯一の道だ。
次にブラウザのデベロッパーツールの「Rendering」タブを開くとき、ぜひフォントがどのようなタイミングでレンダリングパイプラインに入り込んでいるか、その挙動を深く追跡してみてほしい。そこには、ただの文字表示とは呼べない、エンジニアリングの芸術があるはずだ。
コメント