こんにちは！Webブラウザの深淵を覗き込み、日夜ピクセルと格闘しているエンジニアです。
Webサイトを作っていて、「あれ、読み込みの瞬間に一瞬だけ文字が消えるな…」とか、「いきなりフォントがカクンと切り替わって、レイアウトがズレた！」なんて経験はありませんか？
あれ、実はブラウザが裏側で一生懸命「カッコいい文字を表示しよう」として頑張っているからこそ起きる、ちょっとした「お節介」の副作用なんです。今日は、このフォント読み込みの裏側で何が起きているのか、なぜズレるのかを一緒に紐解いていきましょう。大丈夫、仕組みさえ分かれば怖くありませんよ。
—
フォントは「後から届く宅急便」
Webブラウザがページを表示する時、まるで料理を作るように準備を進めます。HTMLを読み込み、CSSで「この文字は明朝体で！」と指示を受け取ります。
でも、Webフォント（Google Fontsなどで読み込む特殊なフォント）は、あなたのPCやスマホの中に最初から入っているわけではありません。Webサイトを開いた後に、サーバーという遠い場所から「宅急便」で運ばれてくるんです。
ここで問題が発生します。「文字を表示したいのに、まだフォントの宅急便が届いていない！」という状況です。この時、ブラウザは二択の対応に迫られます。
1. FOIT (Flash of Invisible Text): 「フォントが届くまで、文字は見せないでおこう（透明にして待つ）」
2. FOUT (Flash of Unstyled Text): 「とりあえず、今ある標準フォントで表示しておいて、フォントが届いたら書き換えよう」
このFOITやFOUTが、あの「一瞬消える」「ガクッと動く」という現象の正体です。
—
レイアウトの「あわてんぼう」がズレを呼ぶ
フォントの読み込みで一番厄介なのが、「レイアウト・シフト」です。
想像してみてください。あなたは今、手紙を書いています。最初は小さめの筆記体で書いていたのに、後からやってきた本番のフォントが少し太くて大きな文字だったらどうでしょう？ 収まっていた行が溢れて、後ろの文章がどんどん押し出されていきますよね。
ブラウザも同じです。標準フォントで計算した画面の場所を、後から届いたフォントで強引に書き換えると、画面全体が「ガクッ」と動いてしまう。これ、ユーザーからすると「おっと、今どこ見てたっけ？」と混乱する原因になってしまうんです。
—
救世主 `font-display` プロパティ
でも安心してください。この挙動を制御するための魔法の言葉が、CSSには用意されています。それが `font-display` です。
これをCSSの `@font-face` に書くだけで、ブラウザに「フォントが遅れたときはこうしてね」と指示が出せます。
@font-face {
font-family: ‘MyAwesomeFont’;
src: url(‘font.woff2’) format(‘woff2’);
/ ここが魔法のスイッチ！ /
font-display: swap;
}
代表的な設定の使い分け
- `block`: 「フォントが来るまで絶対に何も表示しない！」（FOITスタイル。潔いけど、文字が消える時間が長いとユーザーは不安になります）
- `swap`: 「とりあえず今ある文字で見せて！ 届いたらすぐに入れ替えて！」（FOUTスタイル。一番よく使われます。文字がすぐ読めるのでユーザーに優しいです）
- `fallback`: 「ちょっとだけ待つけど、それでも来なかったら標準フォントでいいや」（読み込みが遅い環境に配慮した賢い選択）
—
現場で使える「魔法のひと手間」
実務の現場では、ただ `font-display: swap` を使うだけでなく、「プリロード（先読み）」というテクニックを組み合わせるのが鉄則です。
HTMLの `
` 内にこんな風に書いておくと、ブラウザに「これ、すぐ使うから先にダウンロードしといてね！」と優先順位を教えることができます。
—
最後に：完璧を目指しすぎないこと
Webブラウザは日々進化していて、フォントの読み込み方も賢くなっています。でも、どんなに技術を駆使しても、インターネットの回線状況は変えられません。
「文字が少しズレるくらい、まあいいか」という大らかな気持ちと、「でも、できるだけ読みやすくしてあげよう」という少しの気遣い。このバランスこそが、最高のユーザー体験を作るエンジニアの第一歩です。
まずは `font-display: swap` を試すところから始めてみてください。きっと、あなたのサイトが少しだけ、ユーザーにとって心地よい場所に変わるはずですよ。
また何か分からないことがあったら、いつでも聞いてくださいね。応援しています！
コメント