ノーコードサイトのWebフォント、読み込みが遅い・文字がチラつく原因と対処

ページを開いた瞬間、文字が一瞬だけ別のフォントで表示されてから切り替わったり、逆に文字がしばらく表示されなかったりすることはないでしょうか。おしゃれな見出しフォントを設定したサイトほど、この現象に気づきやすくなります。

この記事では、Webフォント（Webサイト用に読み込む文字のデータ）の表示が不安定になる仕組みと、一般的な対処のしかたを整理します。

起きている2つの現象

• FOUT（Flash of Unstyled Text）：先に標準のフォントで文字が表示され、Webフォントの読み込みが終わった瞬間に切り替わる
• FOIT（Flash of Invisible Text）：Webフォントの読み込みが終わるまで、文字そのものが表示されない

なぜ起きるのか

Webフォントは、画像と同じように、サーバーから読み込んで表示するデータです。文字そのもの（HTML）より先に画面が描き始まるのに対し、フォントのデータは読み込みに少し時間がかかるため、この時間差がFOUTやFOITとして見えてしまいます。

ブラウザには、この待ち時間の間どう表示するかを決める`font-display`という設定があります。既定のままだと、Webフォントの読み込みが終わるまで文字を表示しない動き（FOIT寄り）になりやすいとされています。

一般的な対処のしかた

• `font-display: swap`を指定し、読み込み中は標準フォントで表示してから切り替える（FOUT寄りにする）
• 本当に使うフォントの太さ・書体だけに絞り、読み込むデータの種類を減らす
• 見出しなど、最初に必ず目に入るフォントは`preload`（先読み）を使い、読み込みの開始を早める
• フォントサービス側の設定で、使う文字の範囲を絞る（サブセット化）

ノーコードサービスでの向き合い方

ノーコードサービスの多くは、これらの設定を利用者が直接書き換えられるようにはしていません。フォントの読み込みが体感で気になる場合は、まず使っているフォントの種類・太さの数を減らせないか見直すのが、いちばん手を出しやすい対策です。カスタムコードでの調整に対応しているサービスであれば、`font-display`の指定を追加できないか確認してみてもよいでしょう。

まとめ

文字のチラつきや表示待ちは、Webフォントの読み込みに時間がかかることが原因で、多くのサイトで起こり得る現象です。フォントの種類を絞る、先読みを使う、といった一般的な対処を知っておくと、気になったときに手を打ちやすくなります。

フォントの種類そのものの選び方はStudioで使えるフォントの基本——システムフォント・Webフォント・独自フォントの違いにまとめています。