Webフォントの「一瞬の空白」を制する：font-displayの深層とブラウザの舞台裏
やあ。今日はフロントエンドエンジニアが避けて通れない、しかし意外とブラックボックスになりがちな「フォントレンダリング」の話をしよう。
君たちも経験があるはずだ。「ページを開いた瞬間、一瞬だけテキストが消える（FOIT）」、あるいは「初期フォントからWebフォントにガタッと切り替わる（FOUT）」。この現象、単なるデザインの崩れではなく、ブラウザのレンダリングパイプラインが「フォントがまだ届いていない」という事実にどう立ち向かったかの痕跡なんだ。
今日は、この挙動を制御する `font-display` プロパティの本質を、ブラウザの内部構造と照らし合わせながら紐解いていく。
—
ブラウザは「フォントが届かない」とき、どう動くのか？
ブラウザのレンダリングエンジン（BlinkやWebKit）にとって、Webフォントの読み込みは「非同期の外部リソース」だ。HTMLをパースしてDOMツリーを構築し、CSSOMと結合してレンダーツリーを作る際、ブラウザは「ここにこのフォントが必要だ」と認識する。
しかし、ネットワーク越しにWoff2が届くまでの間、ブラウザは判断を迫られる。
1. FOIT (Flash of Invisible Text): フォントが来るまでテキストを表示しない。
2. FOUT (Flash of Unstyled Text): とりあえずシステムフォントで表示し、後で差し替える。
この挙動を制御するのが `font-display` だ。これを理解することは、Webパフォーマンスの指標である「LCP（Largest Contentful Paint）」を最適化する上でも極めて重要になる。
—
font-displayの使い分け：現場の知恵
実務でよく使うのは、主にこの3つだ。
- `block`: 読み込み完了までテキストを隠す。厳格なタイポグラフィを求めるならアリだが、LCPスコアには致命的。
- `swap`: 即座にフォントを表示し、読み込み後に切り替える。今のWebの最適解。
- `fallback`: 100ms程度は隠し、その後読み込めなければシステムフォントで固定する。
僕が自信を持って薦めるのは、基本的には `swap` だ。ユーザーは「フォントが完璧であること」よりも「情報が早く読めること」を求めているからね。
—
実践的な実装サンプル
以下に、最もモダンでパフォーマンスに配慮した `@font-face` の書き方を置いておく。これをそのまま自分のプロジェクトのCSSに貼り付けてみてくれ。
/
- ベストプラクティス：font-display: swap を採用しつつ、
- 読み込み後のガタつきを最小限にするための設定
/
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘/fonts/my-font.woff2’) format(‘woff2’);
/
- swapを指定することで、ブラウザは即座にフォントを描画する。
- これにより、ユーザーはテキストが消える時間を待たなくて済む。
/
font-display: swap;
/
- 応用: 読み込み前後の「レイアウトのガタつき」を抑えるヒント
- size-adjust や ascent-override を併用すると、
- システムフォントとWebフォントのサイズ差を微調整して
- 切り替わりの瞬間の違和感を極限まで減らせる。
/
size-adjust: 100%;
}
—
パイプラインを意識した最適化の極意
ここからが少し深い話だ。`font-display: swap` を使うと、読み込み完了後にフォントが差し替わる際、ブラウザはレンダーツリーを再評価し、再レイアウト（Reflow）と再ペイント（Repaint）を行う。
もし、Webフォントとシステムフォントで文字の幅が大きく異なると、この瞬間にコンテンツ全体がピョコッと動いてしまう。ユーザーの視線を乱すこの挙動を防ぐには、以下の3つを意識してほしい。
1. preloadの検討: 重要なヘッダーフォントなどは `` を使って、パースの初期段階でフォント取得を優先させる。
2. Font Metrics Override: 上記のサンプルコードで触れた `size-adjust` 等を使い、システムフォントの見た目をWebフォントに近づける。これにより「切り替わり」の心理的負荷を減らすんだ。
3. 不要なウェイトは読み込まない: 「もしかしたら使うかも」で `bold` や `italic` をすべて読み込むのはやめよう。それはブラウザのメモリとネットワーク帯域をドブに捨てるようなものだ。
最後に
ブラウザは君たちのコードを、常に「どうすれば最速で画面を出せるか」という葛藤の中で解釈している。`font-display` を適切に設定するということは、ブラウザに対して「このテキストは、システムフォントでいいから今すぐ見せてくれ」と明確な優先順位を伝えることと同じなんだ。
技術仕様を暗記するのではなく、ブラウザが裏で何に悩み、何を優先しているのかを想像する。それが、中級からシニアへ駆け上がるための唯一の道だよ。
何か詰まったら、またいつでも相談してくれ。応援しているぞ。
コメント