こんにちは！Web制作やフロントエンドの世界へようこそ。
コードを書いていて、「よし、これで完璧！」とブラウザで表示した瞬間、なぜか数秒間文字が消えたり、別のフォントでパッと表示されたあとに突然別のフォントにカクンと切り替わったりして、モヤッとした経験はありませんか？
「自分のコードの書き方が悪いのかな……」と不安になるかもしれませんが、大丈夫ですよ！それはあなたのせいではなく、Webブラウザが一生懸命「文字」を表示しようと奮闘している裏側の仕組みが原因なんです。
今回は、この厄介な現象の正体と、それを魔法のように解決してくれる『`font-display`』というプロパティについて、難しい言葉をできるだけ使わずに、身近な例えを交えながらお話ししていきますね。
—
1. Webフォントが表示されるまでの「ちょっと切ない」裏側
想像してみてください。あなたは今、街の小さなおしゃれなカフェの看板（Webページ）を作っています。
看板に使う文字は、遠くの工房（インターネット上のサーバー）から取り寄せる「特製のこだわりフォント」です。
ブラウザがあなたの作ったHTMLを読み込み始めたとき、こんなドラマが水面下で起きています。
1. HTMLとCSSの解析（お品書きの確認）
ブラウザは上から順番にコードを読み、「おっ、この文字には特製フォントを使うんだな」と気づきます。
2. フォントの注文（お取り寄せ）
ブラウザは慌ててサーバーに向かって「すいません、その特製フォントのデータをください！」と注文（ダウンロード）を出します。
3. さあ、どうする？問題発生
ここで問題です。フォントが届くまでの間、画面をどうしていればいいでしょうか？
届くまでの間、文字を一切出さずに待つのか、それとも手元にある普通のフォント（システムフォント）でとりあえず仮表示しておくのか。
このブラウザの「待ち方」のせいで、私たちの画面で以下の2つの現象が起きてしまいます。
恐ろしい「FOIT」と、ちょっと不格好な「FOUT」
- FOIT（エフ・オー・アイ・ティー / Flash of Invisible Text）
フォントが届くまで、文字が完全に透明になって消えてしまう現象です。「あれっ、文章が消えた！バグった！？」とユーザーが不安になる一番の原因です。
- FOUT（エフ・オー・アイ・ユー・ティー / Flash of Unstyled Text）
フォントが届くまでの間、まずはスマホやPCに最初から入っている普通のフォントで表示し、フォントが届いた瞬間に「ガクッ」と見た目が切り替わる現象です。読んでいる最中に文字の形が変わるので、少し目がチカチカします。
この「文字が消える（FOIT）」か「急に切り替わる（FOUT）」かのせめぎ合いを、私たちの思い通りにコントロールできるようにしてくれるのが、CSSの `font-display` というプロパティなんです。
—
2. 救世主 `font-display` の世界へようこそ
`font-display` は、いわばブラウザに対する「フォントが届くまでの待ち合わせルール指示書」です。
CSSの `@font-face` というルールの中で指定します。いくつか種類がありますが、まずは実務で本当によく使われる代表的な3つの値（ルール）を、カフェの注文に例えて見てみましょう！
① `block` （我が道を行く・厳格モード）
- 例え話：「特製フォントが届くまで、お客さんには一切文字を見せない！ 到着するまで絶対に待たせるんだ！」という頑固な店主スタイル。
- ブラウザの動き：フォントの読み込みが終わるまで、最大3秒間ほど文字が透明になります（FOIT）。文字が消えている時間が長いため、ユーザービリティの観点からはあまりおすすめできません。
② `swap` （まずは代役・スピード重視モード）
- 例え話：「特製フォントが届くまでの間は、とりあえず手元にある普通のフォントで先にメニューを出しておいて！ 届き次第、すぐに特製フォントに切り替えるよ！」という臨機応変なスタイル。
- ブラウザの動き：最初から文字が普通のフォントで見えているため、ユーザーはすぐに文章を読めます（FOUT）。デザインのこだわりよりも「すぐに情報が伝わること」を最優先したい場合にぴったりの、一番人気の設定です。
③ `fallback` （いいとこ取り・バランスモード）
- 例え話：「少しだけ（約0.1秒）は文字を隠して待ってあげるけど、すぐに届かないなら諦めて普通のフォントで表示して！ その代わり、一度表示しちゃったら、あとから特製フォントが届いても切り替えはしないからね」という優しいスタイル。
- ブラウザの動き：文字が消える時間を最小限にしつつ、読んでいる最中に突然フォントが切り替わってイライラさせるのを防ぎます。
—
3. 実践！今日から使えるコードの書き方
百聞は一見に如かず。実際にエディタにどう書けばいいのか、サンプルコードを見てみましょう。
今回は、一番現場で採用されることが多い `swap` を使った書き方をご紹介しますね。
/ 1. 特製Webフォントの定義と、待ち合わせルールの設定を行います /
@font-face {
/ フォントに好きな名前をつけます /
font-family: ‘MyFavoriteFont’;
/ フォントファイルの場所を指定します /
src: url(‘/fonts/my-favorite-font.woff2’) format(‘woff2’);
/ ★ここが今回の主役！「まずは代役で表示してね」という指示です /
font-display: swap;
/ ついでに、フォントの太さやスタイルもここで定義しておきます /
font-weight: 400;
font-style: normal;
}
/ 2. 定義したフォントを、実際のHTML要素（見出しなど）に適用します /
body {
/ 先ほど名前をつけたフォントを呼び出します。
万が一読み込みに完全に失敗したときの保険として、
後ろに “sans-serif”（ゴシック体）などを書いておくと安心です。 /
font-family: ‘MyFavoriteFont’, sans-serif;
font-size: 16px;
line-height: 1.5;
}
このコードをあなたのCSSファイルに仕込んでおくだけで、ブラウザは「おっ、今回は `swap` だな。じゃあ文字が消えないように優しい表示を心がけよう！」と判断してくれます。
—
4. 最後に：チーフアーキテクトからのアドバイス
Webフォントの読み込み戦略は、ただ見た目を綺麗にするだけでなく、「そのサイトを訪れたユーザーを待たせない、イライラさせない」という優しさの技術です。
特にスマホで回線が不安定な中、文字がいつまでも消えたままのサイトに出会うと、ユーザーはパッとページを閉じて（離脱して）しまいます。
「デザインの美しさ（こだわり）」と「表示の速さ（思いやり）」のバランスを取るために、ぜひ `font-display: swap;` をあなたの引き出しの一つに加えてみてください。
最初は難しく感じるかもしれませんが、ブラウザの気持ちになって「あ、今この子はフォントを待ってるんだな」と想像できるようになると、フロントエンドの開発がもっともっと楽しくなりますよ。
あなたのWeb制作ライフが、心地よいものになりますように。応援しています！
コメント