Webフォント最適化：TTFからWOFF2への変換によるファイルサイズのメリットと読み込み戦略

WOFF2はBrotli圧縮アルゴリズムを使用しています。gzip圧縮を使用するWOFFと比較すると、WOFF2はファイルサイズを約30%削減し、非圧縮の生TTF/OTFフォントと比較するとファイルサイズを約50%削減します。

サイズの圧縮により、Webページ読み込み時に転送されるフォントデータの量が直接削減され、帯域幅の使用量が低下し、ファーストスクリーンのリソース読み込み完了時間が短縮されます。特にモバイルネットワーク環境でのページアクセスに適しています。

2016年以降にリリースされた主要なデスクトップおよびモバイルブラウザは、すべてネイティブでWOFF2形式をサポートしており、追加の互換性処理は必要ありません。

各ブラウザにおけるWOFF2サポートの開始バージョンは以下の表の通りです。現在の主流ブラウザバージョンはすべてこの形式をサポートしているため、本番環境で安全に使用できます。

WOFF2フォントを使用する際は、CSS内の@font-faceルールでフォントを宣言し、src属性の最も優先度の高い位置にWOFF2形式を配置する必要があります。

unicode-range属性と組み合わせることで、フォントのサブセット化が可能になります。それぞれの@font-faceが1つのUnicode範囲に対応し、ブラウザは現在のページコンテンツに必要なフォントサブセットのみを読み込むため、不要なリソースの読み込みを削減できます。

CSSでは、@font-faceに対してfont-display: swapを宣言する必要があります。このプロパティにより、WOFF2フォントの読み込みが完了するまでの間、ブラウザはデフォルトのシステムフォントでテキストを表示でき、ファーストスクリーンのテキストブロックが空白になることを回避し、ファーストスクリーンのコンテンツを正常に読み取れるようにします。

CJK（中国語、日本語、韓国語）文字セットのフォントには数千から数万文字が含まれており、フルファイルのサイズは数MBから十数MBに達することがあります。サブセット化によってページに必要な文字のみを抽出し、単一ファイルのサイズを適切な範囲内に抑え、読み込みパフォーマンスを確保する必要があります。