Web Open Font 2
フォントWOFF2はフォントデータの前処理とBrotli圧縮を使うWeb用容器です。WOFFより軽くなることがありますが、実際の容量は書体と収録文字に左右されます。CSSでformatをwoff2として指定し、対象ブラウザーで文字、太さ、可変フォントの軸などを確認します。ファイル名だけ変更してWOFF2化はできません。
- 主な用途
- Webフォントの効率的な配信
- 中身の種類
- バイナリデータ
目次・よくある質問・根拠資料を見る
内容の最終確認： · 編集：Kai
開き方・操作手順
使っている環境や目的の項目を開いて、手順を確認してください。
操作名・対応状況はアプリ・OS・版によって異なります。変更する前に原本を残してください。
開けないとき：症状から確認
- WOFFから置換すると失敗：内容が本物のWOFF2か、format指定とURLが一致するか確認します。
- 太さが不自然：単一書体と可変書体を区別し、CSSのweight範囲を確認します。
- 軽量化後に文字が欠ける：サブセットに必要な記号や言語の文字が含まれるか確認します。
- 取得は成功しても未適用：対象要素のfont-familyとCSSの上書きを確認します。
- 別サイトへの移動後に失敗：配信URL、転送とCORSを確認します。
- モバイルで改行が違う：使用書体、幅とfont-sizeを比較します。
許諾されたTTF / OTF → WOFF2
- 提供元のWeb用ファイルがあれば使用し、変換・サブセット化の許可を確認します。
- 対応エンコーダーで別出力し、必要なグリフ・書式機能・可変軸を検証します。
- WOFF2の改名ではなく、許可された元書体から対応ツールで生成して表示を確認します。
WOFF2の展開結果は元ファイルとバイト単位で同一とは限りません。Webライセンスをデスクトップ利用許可と取り違えません。
軽さと字形範囲を比較
容量だけでなく、日本語や記号の収録範囲を同じ条件で比べます。小さいファイルが必要な字形を全部持つとは限りません。
確認例：見出し、本文、太字、数字、句読点を一つのテストに含めます。同じ幅で表示して欠字と折返しを比較します。
この手順の根拠：W3C · WOFF File Format 2.0 / W3C · CSS Fonts Module Level 3
表示確認に使う文字列
見出し、本文、太字、数字と記号を含むテストを用意します。スマホ幅で改行、欠字と代替書体を確認します。
この手順の根拠：W3C · WOFF File Format 2.0 / W3C · CSS Fonts Module Level 3
関連形式との違い
| 形式・方法 | 役割 | 確認する点 |
|---|---|---|
| WOFF2 | Web書体の圧縮 | 字形・太さ |
| サブセット | 文字を絞る | unicode-range |
| 可変書体 | 軸で調整 | 軸と対応範囲 |
取り扱いと安全性
配布元、許諾、外部通信を確認し、ブラウザーとフォント関連ツールを更新した環境で利用します。
よくある質問
WOFF2なら必ず小さくなる？
書体・文字数・元データで異なります。実ファイルを比較します。
WOFFを改名して使える？
内部圧縮が違うため、正しい変換が必要です。
可変フォントを入れられる？
形式は対応しますが、使用するブラウザーとCSS設定も確認します。
WOFF2には必ず可変軸がある？
通常の固定書体も含められます。圧縮容器だけでは軸の有無は分かりません。
圧縮で文字の線が画像のように荒れる？
画像縮小とは別です。表示差は元書体、字形、太さやレンダリング環境も確認します。
形式の基本情報：正式名称・MIME type・管理団体
- 名称
- Web Open Font Format 2.0
- 管理・仕様
- W3C
- MIME type
- font/woff2
公式・一次情報
- 標準仕様WOFF File Format 2.0
WOFF2の圧縮・フォントデータ・MIME typeを定義しています。
W3C · リンク確認： - 標準仕様CSS Fonts Module Level 3
@font-faceとフォントの読み込み条件を定義しています。
W3C · リンク確認：