ウェブフォントの読み込みを最適化する

ウェブフォントは見た目の統一感を保つうえで欠かせない存在ですが、読み込みの仕方によってはページの表示速度に大きな影響を与えます。とくに初回訪問時はフォントファイルのダウンロードが完了するまでテキストが見えない、いわゆる FOIT（Flash of Invisible Text）が発生することがあります。

font-display の使い分け

CSS の font-display プロパティを指定することで、フォント読み込み中の表示挙動を制御できます。swap を指定すると、フォールバックフォントを先に表示し、ウェブフォントの読み込みが完了した時点で差し替えます。テキストが常に見えるためユーザー体験の低下を防げます。

一方、ブランドロゴやアイコンフォントのように差し替え時のちらつきを避けたい場合は block や optional が適しています。用途に応じて値を使い分けることが重要です。

サブセット化による軽量化

日本語フォントはグリフ数が多く、ファイルサイズが大きくなりがちです。使用する文字のみを抽出してサブセット化することで、ファイルサイズを大幅に削減できます。Google Fonts では自動的にサブセット配信が行われますが、セルフホスティングする場合は手動でサブセット化する必要があります。