フォントMIMEタイプ — WOFF, WOFF2, TTF, OTF
font/woff2、font/woff、font/ttf、font/otfを含むWebフォントの正しいMIMEタイプとサーバー設定のヒントを学びます。
Best Practices
詳細な説明
WebフォントMIMEタイプ
正しいMIMEタイプでフォントを配信することは、ブラウザレンダリング、CORS準拠、HTTP/2優先度設定に不可欠です。
公式フォントMIMEタイプ（RFC 8081）
| MIMEタイプ | 拡張子 | 推奨 |
|---|---|---|
font/woff2 |
.woff2 | はい（最高圧縮） |
font/woff |
.woff | フォールバック |
font/ttf |
.ttf | レガシーフォールバック |
font/otf |
.otf | レガシーフォールバック |
なぜWOFF2が最初か
WOFF2はBrotli圧縮を使用し、WOFF 1.0と比較して30〓50%小さなファイルサイズを達成します。
フォントのCORS
クロスオリジンで読み込まれるフォントにCORSヘッダーが必要です：
Access-Control-Allow-Origin: *
パフォーマンスのヒント
- 見えないテキストを避けるため
font-display: swapを使用 - 必要な文字のみのサブセットフォント
<link rel="preload">でクリティカルフォントをプリロード- プライバシーとパフォーマンスのためにセルフホスト
ユースケース
カスタムフォントを配信するWebサーバー、CDN、ビルドツールの設定時にこれらのMIMEタイプを適用します。プライマリフォーマットとしてfont/woff2を使用し、クロスオリジンフォント読み込みにCORSヘッダーを追加します。