font-displayとは、Webフォントの読み込み時にテキストをどのように表示するかを制御するCSSプロパティです。

設定によって、フォントが読み込まれるまで非表示にするのか、代替フォントで先に表示するのかを選択できます。

これにより、表示の遅延（FOIT）やフォント切り替え時のチラつき（FOUT）を調整でき、ユーザー体験や表示速度に大きく影響します。

適切に設定することで、Core Web Vitalsの改善にもつながります。

font-displayとは？

font-displayとは、Webフォントの読み込み時にテキストをどのように表示するかを制御するCSSプロパティです。

設定によって、フォントが読み込まれるまで非表示にするのか、代替フォントで先に表示するのかを選択できます。

これにより、表示の遅延（FOIT）やフォント切り替え時のチラつき（FOUT）を調整でき、ユーザー体験や表示速度に大きく影響します。

適切に設定することで、Core Web Vitalsの改善にもつながります。

font-displayの仕組み

font-displayは、Webフォント読み込み時のテキスト表示を「ブロック期間」と「スワップ期間」で制御する仕組みです。

最初のブロック期間では、フォントが読み込まれるまでテキストを非表示または代替フォントで表示します。

その後のスワップ期間では、Webフォントが読み込まれ次第、自動的に置き換えられます。

この時間制御により、表示遅延（FOIT）やフォントのチラつき（FOUT）を調整できます。

設定値によってこれらの期間が変わるため、UXと表示速度のバランスを取ることが重要です。

font-displayの値一覧と違い

font-displayには5つの値があり、それぞれフォント表示のタイミングや挙動が異なります。

blockはフォント読み込みまで非表示（FOIT）、swapは代替フォントを即表示して後から切替（FOUT）が特徴です。

fallbackやoptionalは表示速度とUXのバランスを重視した設定です。

用途やサイト特性に応じて適切に使い分けることが重要です。

swapのおすすめな使い方

swapは最も一般的で推奨される設定で、まず代替フォントを即表示し、読み込み後にWebフォントへ切り替える挙動です。

テキストがすぐに表示されるため、表示遅延を防ぎLCP改善に効果があります。

特にブログやメディアサイト、SEO重視のページに適しています。

ただしフォント切り替え時にレイアウトがズレる可能性があるため、フォントサイズやline-heightを調整し、CLS対策を行うことが重要です。

blockのおすすめな使い方

blockは一定時間テキストを非表示にし、Webフォントが読み込まれてから表示する設定です。

ブランドフォントやデザインの一貫性を重視するサイトに向いています。

特にロゴ周りやファーストビューでフォント崩れを避けたい場合に有効です。

ただしFOIT（テキスト非表示）が発生するため、表示遅延やUX低下のリスクがあります。

使用範囲を限定し、全体には使わないのがポイントです。

fallback / optionalのおすすめな使い方

fallbackやoptionalは、表示速度とUXのバランスを重視した設定です。

fallbackは短時間のみ非表示にし、その後は代替フォントを表示、optionalはネットワーク状況によってはWebフォントを読み込まず代替フォントのまま表示します。

特にモバイルユーザーや通信環境が不安定な場合に有効で、表示の安定性を重視するサイトに適しています。

パフォーマンス優先の設計に向いています。

font-displayと表示速度の影響

LCPへの影響

font-displayの設定はLCP（Largest Contentful Paint）に大きく影響します。

blockを使用するとフォント読み込みまでテキストが非表示となり、LCPの計測対象が遅れてしまうため数値が悪化しやすくなります。

一方、swapやfallbackを使用すれば代替フォントで即表示されるため、LCPが早くなり表示速度の改善につながります。

特にファーストビューのテキスト要素では、font-displayの選択がパフォーマンスに直結します。

CLSとの関係

swapなどを使用すると、後からWebフォントに切り替わる際に文字サイズや幅が変わり、レイアウトシフト（CLS）が発生することがあります。

これにより画面がズレてユーザー体験が損なわれる可能性があります。

CLSを抑えるには、フォールバックフォントとのサイズ差を調整したり、font-size-adjustなどを活用することが重要です。

見た目と安定性のバランスが求められます。

UXへの影響

font-displayはユーザー体験に直結する重要な要素です。

blockではテキストが一時的に表示されず不安を与える一方、swapでは即表示されるもののフォント切り替え時に違和感が出る場合があります。

fallbackやoptionalはその中間で、表示の安定性を保ちながら速度も確保できます。

サイトの目的やユーザー環境に応じて最適な設定を選ぶことで、快適な閲覧体験を実現できます。

font-displayのメリット

表示ブロック回避

font-displayを適切に設定することで、Webフォント読み込み中のテキスト非表示（FOIT）を回避できます。

特にswapやfallbackを指定すると、代替フォントで即時表示されるため、ユーザーはコンテンツをすぐに確認できます。

これにより初期表示の遅延が解消され、ページの体感速度が向上します。

結果として読み込み中のストレスが軽減され、離脱防止にもつながります。

UX改善

font-displayはユーザー体験の向上に大きく寄与します。

テキストがすぐに表示されることで「何も表示されない時間」をなくし、安心感を与えます。

また、fallbackやoptionalを活用することで、フォントの切り替えによる違和感を最小限に抑えることも可能です。

適切な設定により、視認性・安定性・快適さをバランスよく保つことができます。

SEOへの間接効果

font-displayは直接的なSEO要因ではありませんが、表示速度やUX改善を通じて間接的に影響します。

特にLCPやCLSといったCore Web Vitalsの改善につながるため、検索評価の向上が期待できます。

また、表示遅延が減ることでユーザーの離脱率が下がり、滞在時間の増加にも寄与します。

結果としてサイト全体の評価向上につながる重要な施策です。

font-displayのデメリット・注意点

フォントのチラつき（FOUT）

font-displayでswapなどを指定すると、代替フォントが先に表示され、後からWebフォントに切り替わるため、見た目が一瞬変わる「チラつき（FOUT）」が発生します。

特にブランドフォントやデザイン性の高いサイトでは違和感が出やすく、ユーザーに不安を与える可能性があります。

フォント差を小さくする、類似フォントを選ぶなどの工夫が必要です。

デザイン崩れ

Webフォントと代替フォントでは文字幅や行間が異なるため、切り替え時にレイアウトが崩れることがあります。

特に見出しやボタンなど、デザインが重要な要素では影響が大きくなります。

これにより意図しない改行や配置ズレが発生し、UIの品質が低下する可能性があります。

事前にフォールバックフォントを調整し、差異を最小限に抑えることが重要です。

CLS悪化リスク

フォント切り替えによるレイアウトのズレは、CLS（Cumulative Layout Shift）の悪化につながります。

特にswapを使用した場合、後からフォントが適用されることで要素のサイズや位置が変わり、視覚的な不安定さが発生します。

CLSを抑えるには、font-size-adjustの活用やフォールバックフォントとのサイズ調整が有効です。

速度と安定性のバランスを意識した設計が求められます。

font-displayの設定方法

CSSでの指定方法

font-displayは、@font-faceルール内で指定することで設定できます。

使用するWebフォントに対して「font-display: swap;」などを記述するだけで、フォント表示の挙動を制御できます。

例えば、フォント読み込み中に代替フォントを表示したい場合はswapを指定します。

@font-face {
  font-family: 'Example';
  src: url('example.woff2') format('woff2');
  font-display: swap;
}

これにより、テキストの非表示を防ぎ、表示速度とUXを改善できます。

複数フォントを使う場合も、それぞれ個別に設定することが重要です。

Google Fontsでの設定

Google Fontsを利用する場合は、読み込みURLに「display=swap」などのパラメータを追加することでfont-displayを設定できます。

例えば「?family=Roboto&display=swap」のように記述することで、代替フォントを即表示し、後からWebフォントに切り替える挙動になります。

特に指定しない場合はデフォルト挙動となるため、意図しない表示遅延が発生する可能性があります。

必ず明示的に設定することが推奨されます。

【ケース別】font-displayの最適な設定

font-displayは一律で最適解が決まるわけではなく、サイトの目的やユーザー環境に応じて使い分けることが重要です。

表示速度を最優先するのか、デザインの一貫性を重視するのかによって最適な設定は変わります。

ポイントをまとめると下記になります。

• 基本は「swap」を使用（表示速度とSEO重視）
• ブランド重視の箇所は「block」を限定的に使用
• UXと速度のバランスは「fallback」
• モバイル・低速回線は「optional」

基本はswapをベースにしつつ、ブランド性が重要な箇所や通信環境を考慮してfallbackやoptionalを組み合わせることで、UXとパフォーマンスのバランスを最適化できます。

font-displayのよくある失敗パターン

何も設定しない（auto放置）

font-displayを指定せずautoのままにすると、フォントの表示挙動はブラウザ任せになります。

その結果、読み込み中にテキストが表示されないFOITが発生しやすく、ユーザーはコンテンツをすぐに確認できません。

特にモバイル環境では表示遅延が顕著になり、離脱率の上昇につながる可能性があります。

最低でもswapなどを明示的に設定し、表示挙動をコントロールすることが重要です。

全てswapで統一

swapは基本的に推奨される設定ですが、すべての要素に一律適用するのは失敗パターンです。

フォント切り替え時にFOUTが発生し、ブランドロゴやファーストビューなどで違和感が出る可能性があります。

また、フォント差によるレイアウトズレも起こりやすくなります。

重要な箇所はblockやfallbackを使うなど、用途に応じた使い分けが必要です。

フォントサイズ未調整

Webフォントと代替フォントのサイズや文字幅を調整していないと、切り替え時に大きなレイアウト変化が発生します。

これにより見出しの改行位置が変わったり、ボタンの配置がズレるなど、UI全体に影響が出ます。

特にCLSの悪化につながるため注意が必要です。

font-size-adjustやline-heightの調整、類似フォントの選定などで差異を最小限に抑えることが重要です。

preloadやpreconnectの高速化施策との違い

font-displayはフォントの「表示方法」を制御するのに対し、preloadやpreconnectは「読み込み速度」を改善する施策です。

preloadは重要リソースを優先的に取得し、preconnectは外部サーバーとの接続を事前に確立します。

これらは役割が異なるため、単体ではなく組み合わせて使うことで、表示速度とユーザー体験を最大化できます。

参考：preloadとは

参考：preconnectとは

font-displayのよくある質問

swapは本当に最適な設定ですか？

swapは多くのケースで最適とされる設定です。代替フォントで即時表示されるため、表示遅延を防ぎLCP改善に貢献します。

ただし切り替え時にFOUTが発生し、デザインに影響が出る場合もあります。

用途に応じてfallbackやblockと使い分けることが重要です。

blockは使うべきではないですか？

blockは非推奨ではありませんが、使用範囲を限定するべき設定です。

フォント読み込みまでテキストが非表示になるためUXに悪影響を与える可能性があります。

ただしブランドフォントなど、見た目を最優先したい箇所では有効です。

全体ではなく部分的に使うのがポイントです。

fallbackとoptionalの違いは？

fallbackは短時間だけ非表示にした後、代替フォントを表示し、その後Webフォントに切り替えます。

一方optionalは通信状況によってはWebフォントを読み込まず、代替フォントのまま表示されます。

optionalはパフォーマンス重視、fallbackはバランス重視の設定です。

FOITとFOUTの違いは？

FOITはフォント読み込み中にテキストが表示されない状態（Flash of Invisible Text）を指し、ユーザーは内容を確認できません。

一方FOUTは代替フォントが先に表示され、後からWebフォントに切り替わる現象（Flash of Unstyled Text）です。

UXの観点ではFOUTの方が好まれるケースが多いです。

CLSに影響はありますか？

font-displayはCLSに影響します。

特にswapを使用すると、フォント切り替え時に文字幅や行間が変わり、レイアウトがズレる可能性があります。

これによりCLSが悪化することがあります。

フォールバックフォントの調整やfont-size-adjustを使い、ズレを最小限に抑えることが重要です。

LCPは改善されますか？

font-displayの設定によってLCPは改善されます。

swapやfallbackを使用すればテキストがすぐに表示されるため、LCPの計測が早まりスコア改善につながります。

一方blockではテキストが非表示になるため、LCPが遅れる傾向があります。

ファーストビューでは特に重要な要素です。

日本語フォントでも必要ですか？

日本語フォントはファイルサイズが大きいため、font-displayの影響が特に大きくなります。

設定しないと読み込み完了までテキストが表示されないケースもあり、UXに大きな影響を与えます。

swapやoptionalを活用することで、表示速度と可読性のバランスを改善できます。

preloadと一緒に使うべき？

font-displayは表示方法の制御、preloadは読み込み優先度の制御を担うため、併用するのが理想です。

preloadでフォントを早く取得しつつ、font-displayで表示タイミングを最適化することで、表示速度とUXの両方を改善できます。

単体よりも組み合わせた方が効果的です。

フォントのチラつきは防げる？

完全に防ぐことは難しいですが、軽減は可能です。

類似したフォールバックフォントを選ぶ、font-size-adjustを設定する、行間や文字幅を調整することで違和感を抑えられます。

また、重要な箇所のみblockを使うなど、部分的な対策も有効です。

モバイルでも効果ありますか？

モバイルでは通信速度や端末性能の影響を受けやすいため、font-displayの効果は特に大きくなります。

適切に設定することで表示遅延を防ぎ、ユーザー体験を改善できます。

特にoptionalは通信環境に応じた最適化ができるため、モバイル向けに有効です。

どの設定が一番おすすめですか？

基本的にはswapが最もバランスの良い設定で、多くのサイトで推奨されます。

ただしすべてに適用するのではなく、ブランド重視の箇所はblock、パフォーマンス重視ならoptionalなど、用途に応じて使い分けることが重要です。

最適解はサイトごとに異なります。

font-displayのまとめ

font-displayは、Webフォントの表示タイミングを制御し、表示速度とユーザー体験を最適化するための重要なCSSプロパティです。

適切に設定することで、FOITを回避しLCP改善につながる一方、設定次第ではFOUTやCLS悪化のリスクもあります。

基本はswapを軸にしつつ、用途に応じてblockやfallback、optionalを使い分けることが重要です。

preloadなどの高速化施策と併用し、実測しながら最適化することで最大の効果を発揮します。