【入門編】font-displayプロパティとインラインテキストの表示タイミング – HTML実践ガイド

Webフォントの「一瞬の空白」にさようなら！font-displayでユーザー体験を磨こう

Webサイトを作っているとき、こんな経験はありませんか？

「パッとページを開いた瞬間、一瞬だけ文字が消えて、その後ヒョイッと別のフォントに切り替わる……」

これ、実はWebフォントの読み込み中に起こる「あるある」なんです。ユーザーからすると、「あれ？壊れてるのかな？」と不安を感じさせてしまうことも。今回は、この現象をスマートに解決する魔法のプロパティ`font-display`について、一緒に紐解いていきましょう。

—

「Webフォント」は、遠くから届く荷物のようなもの

まずはイメージしてみてください。Webフォントを読み込むというのは、「自分のお店に、遠くの倉庫から新しいデザインの看板を取り寄せる」ようなものです。

1. 注文（HTML/CSSでフォントを指定）
2. 配送（ブラウザがフォントファイルをダウンロード）
3. 到着（フォントが適用される）

問題は、この「配送中」のタイミングです。何も対策をしないと、ブラウザは「看板が届くまで、店（Webサイト）の入り口を閉めておこう」と判断してしまいます。これが、文字が消えてしまう現象（FOIT: Flash of Invisible Text）の正体です。

せっかく見に来てくれたお客様を、入り口で待たせるなんて勿体ないですよね。そこで活躍するのが `font-display` なんです。

—

font-displayで「接客スタイル」を決めよう

`font-display`を使うと、フォントが届くまでの「お店の対応」をブラウザに指示できます。代表的な設定を3つ、お買い物に例えて紹介しますね。

1. swap（迷ったらこれ！）

「とりあえず、今ある手持ちの看板（PCに入っている標準フォント）を飾っておいて。届いたらすぐに新しい看板に差し替えてね！」というスタイル。

• メリット: とにかく文字がすぐに表示されるので、ユーザーを待たせません。
• おすすめ: ほとんどのWebサイトで、まずはこれで間違いありません。

2. block（じっくり待つ）

「看板が届くまで、入り口を閉めて待機！デザインが命だから、中途半端なものは見せたくないんだ」という職人スタイル。

• メリット: デザインの統一感は完璧です。
• 注意点: 通信環境が悪いと、ユーザーは「何も表示されない空白の時間」に耐えなければなりません。

3. fallback（いいとこ取り）

「ちょっと待つけど、それでも届かなかったら諦めて今ある看板でいくよ」という、バランス重視のスタイル。

—

実践！CSSで書いてみよう

実際にWebフォントを読み込むCSS（`@font-face`）に、このプロパティを書き足すだけでOKです。難しくないので、一緒にやってみましょう。

@font-face {
/ フォントの名前を決めます /
font-family: ‘MySpecialFont’;

/ フォントファイルの場所を指定 /
src: url(‘my-font.woff2’) format(‘woff2’);

/ ここが魔法のプロパティ！ /
/ ‘swap’を指定することで、読み込み中も文字を表示させます /
font-display: swap;
}

/ あとは普通に使うだけ /
body {
font-family: ‘MySpecialFont’, sans-serif;
}

たったこれだけで、ユーザー体験はぐっと向上します。「文字が消える」という小さなストレスを消すだけで、サイトの信頼感は大きく変わるんですよ。

—

インラインテキストを彩るあなたへ

``タグや``タグで囲んだ大切な言葉たちが、読み込みの瞬間に消えてしまうのは悲しいですよね。`font-display: swap;`を設定しておけば、どの要素も最初からちゃんと表示され、フォントが届いた瞬間に「スッ」と洗練されたデザインに切り替わります。