FORMAT COMPARISON
WOFF vs WOFF2
WOFFとWOFF2はいずれもWebフォント配信用の形式です。用途は近いものの仕様と圧縮方式が異なるため、対象ブラウザ、既存環境、転送サイズで選びます。
WOFFとWOFF2、どちらを選ぶ？
新規のWebフォント配信ではWOFF2を基本候補にし、既存環境や必要な対応範囲によってWOFFも検討します。どちらもデスクトップ用フォントの代替ではありません。
WOFF向き
Webフォント配信
- WOFF対応を含むWebフォント配信
- 既存WOFFワークフロー
WOFF2向き
Webフォント
- Web配信のフォント
基本情報を比較
WOFFとWOFF2の主な違いを確認できます。
| 項目 | WOFF | WOFF2 |
|---|---|---|
| 拡張子 | .woff | .woff2 |
| MIME Type | font/woff | font/woff2 |
| 主な用途 | Webフォント配信 | Webフォント |
| 圧縮 | 可逆圧縮 | 可逆圧縮 |
| 開く方法 | CSSの@font-faceでブラウザから読み込みます。内容確認には対応するフォントツールを使います。 | WebブラウザでCSSから読み込みます。内容確認には対応するフォントツールを使います。 |
| 書き出し・変換 | TTFやOTFから変換します。配信時はWOFF2も用意するか、対象ブラウザとライセンスを確認します。 | TTFやOTFから変換ツールで生成します。変換後もライセンス、文字セット、表示を確認します。 |
用途別の選び方
作りたいものや使う場面から選べます。
WOFF対応を含むWebフォント配信
Webフォント配信
WOFF向き既存WOFFワークフロー
Webフォント配信
WOFF向きWeb配信のフォント
Webフォント
WOFF2向き確認ポイント 1
WOFFとWOFF2はWebフォント配信用の形式
使い分け確認ポイント 2
WOFF2はより新しい仕様で転送サイズを抑える候補になる
使い分け選ぶ理由を詳しく
- 対象ブラウザとライセンスを確認して選ぶ