【入門編】 font-displayプロパティとフォントレンダリング – Webブラウザの仕組み実践ガイド

やあ。Webブラウザという「巨大な迷宮」を冒険中の皆さん、こんにちは。

今日は、Webサイトを作っていて誰もが一度は頭を抱える「フォントの読み込み問題」について、少しだけ深く、でも温かくお話ししようと思います。

「Webフォントを読み込んでいる最中、一瞬文字が消えたり、後からガクッとレイアウトが変わったりしたことはありませんか？」

あれ、実はブラウザが裏側で一生懸命「どうやってユーザーを待たせないか」と格闘している証拠なんです。今日はその舞台裏をのぞいてみましょう。

—

まず、Webブラウザのレンダリングパイプラインという「料理の工程」を想像してみてください。

1. HTML/CSSを読み込む（材料調達）
2. DOM/CSSOMを作る（下ごしらえ）
3. レイアウトを計算する（皿に盛り付ける場所を決める）
4. 描画（ペイント）して画面に表示する（完成！）

Webフォントは、この工程の途中で「遠くの町からトラックで運ばれてくる高級食材」のようなものです。

もしフォントの到着が遅れたら？ブラウザには2つの選択肢しかありません。

昔のブラウザは、何も言わなければ「文字を見せない（FOIT）」という頑固な対応をとることが多かった。これが、ネットが遅い時に文字がスッと消えてしまう正体です。

—

ここで登場するのが、CSSの救世主 `font-display` プロパティです。これは、ブラウザに対して「フォントが遅れてきたらどう振る舞うべきか」を指示するコントロールパネルのようなものですね。

代表的な設定を、お買い物の例えで見てみましょう。

「フォントが来るまで絶対にダメ！文字は隠しといて！」というスタイル。デザインの崩れを嫌う場合に使うけれど、ユーザーを待たせすぎるリスクがあります。

「とりあえず今あるフォント（システムフォント）で表示して！フォントが届いたらすぐに差し替えるから！」という、現代のWebで最も愛されている設定です。少しレイアウトが動くかもしれませんが、「何が書いてあるかすぐ読める」という体験を優先します。

「100msくらい待ってダメなら今のフォントでいいよ。その代わり、読み込めたら次にページを開くときから使ってね」という、控えめな性格。

—

では、実際にどう書くのか見てみましょう。CSSの `@font-face` の中に一行加えるだけです。

@font-face {
font-family: ‘MySpecialFont’; / フォントの名前 /
src: url(‘/fonts/my-font.woff2’) format(‘woff2’); / データの場所 /

/ ここが今回の魔法の杖です /
/ swapを使うことで、読み込み中もすぐにテキストが表示されます /
font-display: swap;
}

body {
/ ここで定義したフォントを呼び出します /
font-family: ‘MySpecialFont’, sans-serif;
}

ポイント:
`font-family` に `sans-serif` や `serif` といった「システムフォント」を後ろに書いておくのを忘れないでくださいね。これが `swap` するときの「とりあえずの保険」になってくれます。

—

「レイアウトがガクッと動くのはカッコ悪いんじゃないかな？」と心配になるかもしれません。でも、世界中のWebスペシャリストたちはこう考えています。

「表示されないテキストほど、ユーザーにとってストレスなものはない」と。

読み込みが終わった瞬間にパッとフォントが切り替わる「FOUT」は、実は「サイトが動いている」という活気を感じさせるサインでもあります。完璧な見た目を追求するあまり、ユーザーを真っ白な画面の前で待たせるより、ずっと人間味があって親切だと思いませんか？

ブラウザのレンダリングは、まさに「バランスの芸術」です。皆さんが書くコード一つひとつが、ユーザーの目に届くまでの小さな旅を支えています。

最初は難しく感じるかもしれませんが、まずは `font-display: swap;` から試してみてください。それだけで、あなたのWebサイトはぐっと優しく、快適になりますよ。

それでは、また次の迷宮でお会いしましょう！応援しています。