さまざまな Web フォントの最適化を紹介しましたが、それでも FOUT / FOIT をどうしても避けたい場面があります。例えばファーストビューのキャッチフレーズやロゴ、UI 要素に使うアイコンフォントといったものです。

このような場合、奥の手ではありますが、Base64 でフォントを埋め込んでしまう方法があります。

 必要なグリフだけを収録した WOFF2 を Data URL として @font-face の src に直接記述し、HTML にインライン化します。これにより、初回描画時に外部リソースの取得を待たずフォントが適用され、FOUT / FOIT を避けることができます。

注意点として、Base64 でフォントファイルのサイズが大きくなり、フォントのキャッシュ効率も下がるほか、HTML ファイルサイズの増加で最初のレンダリング時間（FCP）が増加する可能性もあるため、読み込むべきフォントは可能な限り小さく（数 KB 程度）する必要があります。コンテンツセキュリティポリシー（CSP）の設定で Data URL を許可する必要もあります。

この方法はフォントファイルの改変にあたるため、フォントのライセンス・権利関係をクリアにしておく必要があります。

（LN）