Webフォントの読み込み時に発生するFOITとFOUTは、表示速度やユーザー体験に大きな影響を与える重要な要素です。

テキストが表示されない、あるいは途中でフォントが切り替わるといった現象は、離脱率の増加やパフォーマンス低下につながる可能性があります。

本記事では、FOITとFOUTの違いや発生原因を整理し、表示速度への影響と具体的な対策までわかりやすく解説します。

FOITとFOUTの違い

FOITはテキストが一時的に表示されないため、ユーザーに強いストレスを与えやすく、表示速度の評価にも悪影響を及ぼします。

一方FOUTは代替フォントで即表示されるため、体感速度が向上しUXも良好です。そのため現在はFOUTを前提とした設計が主流となっています。

FOITとは？

FOIT（Flash of Invisible Text）とは、Webフォントの読み込み中にテキストが一時的に表示されなくなる現象です。

主にfont-display: blockなどの設定で発生し、フォントが完全に読み込まれるまで文字が非表示の状態になります。

この間、ユーザーはコンテンツを確認できず、強いストレスを感じる原因となります。

また、ファーストビューのテキストが表示されないことでLCPの遅延にもつながり、表示速度やSEO評価にも悪影響を与える可能性があります。

UX観点では避けるべき挙動とされています。

FOUTとは？

FOUT（Flash of Unstyled Text）とは、Webフォントが読み込まれる前に代替フォントでテキストが表示され、その後Webフォントに切り替わる現象です。

主にfont-display: swapなどの設定で発生します。

テキストがすぐに表示されるためFOITに比べてユーザー体験は良好ですが、切り替え時に見た目が変わるため違和感が生じることがあります。

ただし表示の遅延を防げる点から、現在はFOUTを許容しつつUXを最適化する設計が一般的です。

なぜFOIT / FOUTが発生するの？

FOITやFOUTは、Webフォントの読み込みと表示タイミングの違いによって発生します。

ブラウザはページ表示時、フォントファイルを取得するまでの間にテキストをどう扱うかを決める必要があります。

このとき、一定時間テキストを非表示にする（ブロック期間）とFOITが発生し、代替フォントで先に表示する（スワップ）とFOUTになります。

つまり、フォント読み込み中の挙動はfont-displayの設定やブラウザの仕様によって制御されており、その違いが見え方の差として現れます。

FOITとFOUTはどちらが良い？

基本的にはFOUTの方が優れており、表示速度やユーザー体験の観点から推奨されるケースが多いです。

テキストがすぐに表示されるため、離脱を防ぎやすく、LCP改善にもつながります。

ただしブランドやデザインの一貫性を重視する場合は、FOIT（block）を部分的に使うケースもあります。

重要なのは一律ではなく、用途に応じて使い分けることです。

FOIT・FOUTが与える影響

表示速度（LCP）

FOITはフォントが読み込まれるまでテキストが非表示になるため、ファーストビューの主要要素が遅れて表示され、LCPの悪化につながります。

一方FOUTは代替フォントで即時表示されるため、LCPの計測が早まり改善に寄与します。

特に見出しや本文などテキストがLCP要素になるケースでは影響が大きく、表示速度の観点ではFOUTを前提とした設計が有利とされています。

レイアウトシフト（CLS）

FOUTではWebフォントへの切り替え時に文字幅や行間が変わり、レイアウトがズレることでCLSが発生する可能性があります。

一方FOITは最初に非表示のため切り替えによるズレは起きにくいですが、その分表示遅延の問題があります。

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

ユーザー体験（UX）

FOITはテキストが一時的に表示されないため、ユーザーに強いストレスや不安を与えやすい挙動です。

一方FOUTはすぐに内容を確認できるため、体感速度が高くUXに優れています。

ただしフォント切り替えによる違和感が発生することもあるため、見た目の調整が必要です。

総合的にはFOUTの方がユーザー体験に優れるとされています。

FOIT / FOUTの対策方法

font-displayの設定

FOITやFOUTの発生は、font-displayの設定によって大きく左右されます。

特に「swap」を指定すると代替フォントが即時表示され、FOITを回避できます。

「fallback」や「optional」を使えば、表示速度と見た目のバランスも調整可能です。

一方「block」はFOITを引き起こすため、使用は限定的にすべきです。

用途に応じて適切に設定することで、UXと表示速度の最適化が実現できます。

参考：font-displayとは

preloadの活用

preloadを使うことで、フォントファイルを優先的に読み込ませることができ、FOITやFOUTの発生時間を短縮できます。

特にファーストビューで使用するフォントはpreload指定することで、表示タイミングが早まり体感速度が向上します。

ただし過剰に指定すると他リソースの読み込みを阻害するため、重要なフォントのみに絞ることが重要です。

参考：preloadとは

フォント軽量化

フォントファイルのサイズが大きいほど読み込みに時間がかかり、FOITやFOUTが長引く原因になります。

そのため不要な文字セットを削減したサブセット化や、圧縮効率の高い形式（WOFF2）を使用することが効果的です。

また、使用フォントの種類やウェイトを減らすことで通信量を削減できます。

軽量化は最も基本かつ効果の高い対策の一つです。

font-displayとの関係

FOITとFOUTは、font-displayの設定によって発生する挙動が大きく変わります。

例えば、font-display: blockはフォント読み込みまでテキストを非表示にするためFOITを引き起こし、swapは代替フォントを即表示するためFOUTが発生します。

さらにfallbackやoptionalは、その中間的な挙動で表示時間や切り替えタイミングを調整します。

つまりfont-displayは、フォント表示の見え方をコントロールする中核的な設定であり、UXと表示速度のバランスを最適化する鍵となります。

FOIT・FOUTのよくある失敗パターン

font-displayを設定せずautoのまま放置

font-displayを指定せずautoのままにすると、フォントの表示挙動はブラウザ任せになります。その結果、テキストが一時的に表示されないFOITが発生する可能性があり、ユーザーはコンテンツを確認できません。

特にモバイル環境では影響が大きく、離脱率の増加につながります。

明示的にswapやfallbackを設定し、表示タイミングをコントロールすることが重要です。

blockを全体に適用してFOITを発生させる

font-display: blockを全体に適用すると、フォント読み込みまでテキストが非表示となり、FOITが発生します。

これによりページが一時的に空白に見え、ユーザーに強いストレスを与えます。

特にファーストビューでの影響が大きく、LCP悪化にもつながります。

blockはブランド重視の一部要素に限定して使うべきです。

swapを全要素に適用してFOUTを過剰発生

swapは推奨される設定ですが、全要素に適用するとFOUTが過剰に発生し、フォント切り替えの違和感が強くなります。

特に見出しや重要なUI要素でデザインの一貫性が損なわれる可能性があります。

用途に応じてblockやfallbackと使い分けることで、UXとデザインのバランスを保つことが重要です。

フォールバックフォントを適当に選ぶ

フォールバックフォントを適当に設定すると、Webフォントとのサイズや字形の差が大きくなり、切り替え時に違和感が発生します。

これによりレイアウト崩れや視認性の低下を招く可能性があります。

できるだけ近いフォントを選び、見た目の差を最小限に抑えることが重要です。

フォントサイズ・行間を調整していない

Webフォントとフォールバックフォントのサイズや行間を調整していないと、切り替え時に大きなズレが発生します。

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

font-size-adjustやline-heightの調整を行い、表示の安定性を確保することが重要です。

CLS対策をせずレイアウトが大きくズレる

フォント切り替え時のレイアウト変化を放置すると、CLSが悪化しユーザー体験が損なわれます。

特にswap使用時は影響が出やすく、視覚的な不安定さが増します。

フォント差を調整したり、適切なスタイル指定を行うことで、ズレを最小限に抑える対策が必要です。

preloadを使わずフォント読み込みが遅い

重要なフォントをpreloadしていない場合、読み込みが後回しになり、FOITやFOUTの発生時間が長くなります。

特にファーストビューで使用するフォントは影響が大きく、表示速度の低下につながります。

必要なフォントのみを優先的に読み込むことで、体感速度を改善できます。

不要なフォントウェイトを読み込んでいる

使用していないフォントウェイトまで読み込むと、ファイルサイズが増加し、読み込み時間が長くなります。

その結果、FOITやFOUTの発生が長引き、表示速度に悪影響を与えます。

実際に使用するウェイトだけに絞ることで、無駄な通信を削減できます。

サブセット化せずフォントが重いまま

フォントをサブセット化せずに使用すると、不要な文字データまで含まれ、ファイルサイズが大きくなります。

特に日本語フォントは影響が大きく、読み込み時間の増加につながります。

必要な文字だけに絞ることで、軽量化し表示速度を改善できます。

モバイル環境を考慮していない

モバイル環境では通信速度や端末性能の影響を受けやすく、フォント読み込みの遅延が顕著になります。

PC基準で設計すると、FOITやFOUTが長くなりUXが低下する可能性があります。

モバイルファーストで設計し、optionalなどの設定を活用することが重要です。

サードパーティフォントを最適化していない

Google Fontsなどのサードパーティフォントをそのまま使用すると、読み込み制御が不十分になり、表示遅延の原因になります。

displayパラメータの指定やpreconnectの活用など、適切な最適化が必要です。

外部リソースほど意識的に管理することが重要です。

実測せずに設定だけ変更している

設定変更だけで満足し、実際のパフォーマンスを測定しないのは大きな失敗です。

改善したつもりでも、逆にCLSやLCPが悪化しているケースもあります。

DevToolsやLighthouseなどで数値を確認しながら最適化を進めることが重要です。

FOIT・FOUTに関するよくある質問

FOITはなぜ問題視されるのですか？

FOITはフォント読み込み中にテキストが表示されないため、ユーザーがコンテンツを確認できず強いストレスを感じます。

特にファーストビューで発生すると離脱の原因になりやすく、LCPの遅延にもつながります。

UX・表示速度の両面で悪影響が大きいため問題視されています。

FOUTは本当に問題ないのですか？

FOUTは代替フォントで即表示されるため、FOITよりUXは良好です。

ただしフォント切り替え時に見た目が変わるため、違和感が生じる場合があります。

完全に問題がないわけではありませんが、表示速度を優先する現代では許容されるケースが多いです。

FOITとFOUTはどちらがSEOに有利ですか？

一般的にはFOUTの方がSEOに有利とされています。

テキストがすぐに表示されるためLCPが改善されやすく、ユーザー体験も向上します。

一方FOITは表示遅延を引き起こし、離脱率増加や評価低下につながる可能性があります。

swapとblockはどう使い分けるべき？

swapは代替フォントを即表示するため、表示速度やSEO重視のページに適しています。

一方blockはフォント読み込みまで非表示にするため、ブランドやデザインを重視したい箇所に限定して使用します。

全体はswap、重要箇所のみblockが基本です。

CLSに影響はありますか？

FOUTではフォント切り替え時に文字幅や行間が変わり、レイアウトがズレることでCLSが発生する可能性があります。

FOITは非表示のためズレは少ないですが、表示遅延の問題があります。

フォント調整やfont-size-adjustで対策が必要です。

LCPはどちらが改善されますか？

FOUTの方がLCP改善に有利です。代替フォントでテキストがすぐ表示されるため、LCPの計測が早まります。

一方FOITはテキストが非表示のままになるため、表示タイミングが遅れLCPが悪化しやすくなります。

FOITやFOUTは完全に防げますか？

完全に防ぐことは難しいですが、最小限に抑えることは可能です。

font-displayの適切な設定やフォント軽量化、preloadの活用によって発生時間を短縮できます。

重要なのは完全排除ではなく、UXへの影響を減らすことです。

日本語フォントでも発生しますか？

日本語フォントでもFOITやFOUTは発生します。

特に日本語フォントはファイルサイズが大きいため、読み込みに時間がかかりやすく影響が顕著です。

適切なfont-display設定や軽量化が重要になります。

preloadは必要ですか？

preloadは必須ではありませんが、重要なフォントには有効です。

優先的に読み込むことでFOITやFOUTの発生時間を短縮し、表示速度を改善できます。

ただし過剰に使うと他リソースに影響するため、必要なものに限定することが重要です。

モバイルでの影響は大きいですか？

モバイルでは通信速度や端末性能の影響を受けやすく、FOITやFOUTの影響は大きくなります。

特に低速回線では表示遅延や切り替え時間が長くなり、UXが悪化しやすいです。

モバイル前提での最適化が重要です。

フォールバックフォントはどう選ぶ？

フォールバックフォントは、Webフォントと見た目が近いものを選ぶことが重要です。

文字幅や高さが似ているフォントを選ぶことで、切り替え時の違和感やレイアウトズレを最小限に抑えられます。

デザインと可読性の両立がポイントです。

Google Fontsでも発生しますか？

Google FontsでもFOITやFOUTは発生します。

特にfont-displayの設定をしない場合、ブラウザ依存の挙動となりFOITが起きる可能性があります。

display=swapなどを指定し、表示挙動を制御することが推奨されます。

FOIT・FOUTまとめ

FOITとFOUTは、Webフォント読み込み時の表示挙動の違いであり、表示速度やユーザー体験に大きな影響を与えます。

FOITはテキストが一時的に非表示となりUXやLCPに悪影響を与えやすい一方、FOUTは代替フォントで即表示されるため、現在は主流とされています。

ただしFOUTでもCLSやデザイン崩れのリスクがあるため、font-displayの適切な設定やフォント調整が重要です。

表示速度と見た目のバランスを考えた最適化が求められます。