ウェブサイトでTTFフォントを配信している場合、必要なデータ量の約30%を余分に送信しています。WOFF2は同じフォントをはるかに小さいファイルで提供し、すべての現代のブラウザがサポートしています。変換方法とサイトパフォーマンスへの影響について説明します。
WOFF2とは何ですか？
WOFF2（Web Open Font Format 2.0）はBrotli圧縮を使用して、TTFと比較して約30%ファイルサイズを小さくしますが、品質の低下はありません。フォントのグリフ、ヒント、 Kerning、およびすべてのタイポグラフィック機能は同一のまま保持されます。ブラウザがWOFF2ファイルを読み込むと、オリジナルのTTFと同じデータにデコードされます。
パフォーマンスへの影響は実在します。フォントはレンダリングブロッキングリソースです — ブラウザはフォントの読み込みが完了するまでテキストを描画しません。120KBのTTFが84KBのWOFF2に変換されると、特にモバイル接続においてテキストがより早く表示されます。GoogleのCore Web Vitalsはこれを直接測定しています：フォントサイズを小さくすると、Largest Contentful Paint（LCP）が向上し、フォントスイッチによるCumulative Layout Shift（CLS）が低減されます。
ブラウザの互換性は万能です。Chrome、Firefox、Safari、EdgeはすべてWOFF2をサポートしています。サポートしていないブラウザはInternet Explorerと非常に古いAndroidブラウザだけで、これらは世界のトラフィックの1％未満です。
変換方法
CSSでWOFF2を使用する
WOFF2ファイルを入手したら、スタイルシートで参照してください。WOFF2を最初にリストに追加し、TTFのフォールバックを設定して最大限の互換性を確保してください。
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}font-display: swapディレクティブは、ブラウザにフォールバックテキストを即座に表示し、カスタムフォントが読み込まれた後にスワップするように指示します。これにより、フォント読み込み中の非表示テキストが解消されます。
フォントライセンスの適合性
多くの商用フォントライセンスには、フォントファイルをサードパーティのWebサービスにアップロードすることを制限する条項が含まれています。これにより問題が生じます：パフォーマンスのためにWOFF2に変換する必要がありますが、ほとんどの変換ツールはフォントをサーバーにアップロードする必要があります。
もちろん、常にフォントライセンスの具体的な条件を確認してください。ただし、Morphのコンバージョンはローカルのみであるため、最も一般的なコンプライアンスの懸念が解消されます。
その他のフォント変換
Morphは、OTFからWOFF2、WOFFからWOFF2、TTFからOTF、およびTTF、OTF、WOFF、WOFF2の他のすべての組み合わせをサポートしています。最初に無料のフォントが必要ですか？Morphのフォントライブラリで1,500以上の無料フォントを参照してください。