Webフォントの「あの待ち時間」の正体。ブラウザが裏側で戦っていること
Webサイトを見ているとき、一瞬だけ文字が消えたり、あるいは読み込みが終わった瞬間にフォントが「ガクッ」と入れ替わったりした経験はありませんか？
「あれ？ネットが重いのかな？」と思いがちですが、実はこれ、ブラウザという名の優秀な職人さんが、「デザインの美しさ」と「情報の速さ」の間でギリギリの攻防を繰り広げている証拠なんです。
今日は、フロントエンドの世界で誰もが一度は頭を悩ませる「Webフォントの読み込み」について、ブラウザの気持ちになりきって紐解いていきましょう。
—
1. ブラウザは「せっかち」で「完璧主義者」
ブラウザがHTMLを読み込んでページを表示する流れは、例えるなら「レストランの開店準備」に似ています。
1. HTMLパース（メニュー表の作成）: 「ここにタイトル、ここに画像…」と全体の構成を決める。
2. DOM構築（配膳の準備）: お皿を並べ、どこに何を置くか確定させる。
3. レンダリング（料理の盛り付け）: 最後にフォントや色を載せて、お客様（ユーザー）に提供する。
ここで問題になるのが「Webフォント」です。Webフォントは、いわば「海外から取り寄せた特別な高級食器」。届くまでに時間がかかるんです。
FOITとFOUT：ブラウザの苦渋の決断
フォントがまだ届いていないとき、ブラウザは二択を迫られます。
- FOIT (Flash of Invisible Text): 「高級食器が届くまでは、料理を出さない！」と言って、文字を隠してしまうパターン。これが「文字が消える」現象です。
- FOUT (Flash of Unstyled Text): 「お客様を待たせてはいけない！」と言って、とりあえず手元にある食器（標準フォント）で料理を出し、後から高級食器に入れ替えるパターン。これが「文字がガクッと変わる」現象です。
どちらも一長一短。ブラウザは「どうすればユーザーが快適か」を、ミリ秒単位で悩み続けているわけです。
—
2. 救世主 `font-display` プロパティ
かつてはブラウザの気分次第だったこの表示ルールですが、現代ではCSSの `font-display` を使って、私たちがコントロールできるようになりました。
これが、魔法の杖です。
よく使う設定を分解
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘/fonts/my-font.woff2’) format(‘woff2’);
/ ここが制御の要！ /
font-display: swap;
}
- `auto`: ブラウザにお任せ。「よしなにやってね」というスタンス。
- `block`: 「フォントが届くまでは絶対に出さない！」（FOITを許容）。デザイン重視派。
- `swap`: 一番のおすすめ。「とりあえず今あるフォントで見せて、届いたらすぐに入れ替える！」（FOUTを許容）。ユーザーはすぐに文章が読めるので、体感速度が格段に上がります。
—
3. 実践：ブラウザに優しくなろう
Webフォントを読み込む際、ただCSSを書くだけでなく、ブラウザに「これから大事なフォントが来るよ！」と事前に教えてあげると、読み込み速度が劇的に変わります。
賢い読み込みのヒント
HTMLの `
` 内で、ブラウザに先回りして準備を促しましょう。
これを入れておくだけで、ブラウザは「おっ、準備が必要なんだな！」と優先順位を上げてくれます。まるで、忙しい厨房で「次はこれを使うよ！」とシェフに合図を送るようなものです。
—
最後に：完璧を求めすぎない勇気
Webフォントは、サイトの個性を決める大切な要素です。でも、「文字が読めない時間」は、ユーザーにとって一番のストレスになります。
「デザインのために文字を消す（block）」のか、「とりあえず表示してユーザーの時間を守る（swap）」のか。どちらが今のサイトにとって大切か、一度考えてみてください。
ブラウザはあなたのコードを一番忠実に再現しようとする、とても健気な相棒です。彼らが迷わないように、私たち開発者が「こうしてほしい」という意思表示をCSSでしっかり伝えてあげれば、Webサイトはもっともっと快適で心地よい場所になりますよ。
大丈夫、一つずつ理解していけば、ブラウザの挙動をコントロールするのはパズルのように楽しくなっていくはずです。応援しています！
コメント