この記事の要点

WOFF（Web Open Font Format）1.0 は 2009 年に Mozilla / Type Supply / LettError が共同提案し、2012 年に W3C 勧告となった Web フォント専用形式 拡張子は .woff。中身は TTF / OTF（SFNT）に zlib（Deflate）圧縮 をかけ、メタデータブロックとプライベートデータブロックを追加した「Web 配信ラッパー」 TTF / OTF と比べてサイズが約 40〜50% 削減され、メタデータ（フォント作者・ライセンス URL）も埋め込める CSS の @font-face で読み込むのが標準的な使い方。format("woff") でブラウザに種類を伝える クロスオリジン制約 (CORS)：ブラウザは別ドメインから配信される WOFF に Access-Control-Allow-Origin を要求する 2026 年現在、WOFF2 がほぼ標準となっており、WOFF 1.0 は 古いブラウザフォールバック として残る程度。IE9〜11 / 旧 Android 用 IANA 登録 MIME タイプ：font/woff（RFC 8081, 2017）。それ以前は application/font-woff

概要

WOFF（Web Open Font Format）1.0 は、Web 配信専用に最適化されたフォント形式です。2009 年に Jonathan Kew、Tal Leming、Erik van Blokland の 3 名（Mozilla / Type Supply / LettError）が共同提案し、Mozilla Firefox 3.6 が先行実装、その後 2012 年 12 月に W3C 勧告 として正式に標準化されました。それ以前の Web フォントは TTF / OTF を直接配信したり、Microsoft の独自形式 EOT を使ったりとブラウザごとにバラバラで、WOFF はこの混沌に終止符を打つために生まれた「すべての主要ブラウザが合意した最初の共通 Web フォント形式」です。

WOFF の中身は、既存の TrueType / OpenType（SFNT）データに zlib（Deflate）圧縮 をかけ、ヘッダとメタデータブロック・プライベートデータブロックを足しただけのシンプルな構造です。フォントの本体（グリフやテーブル群）は TTF / OTF とまったく同じものを使えるため、フォントデザイナーは普段通り OTF / TTF を作り、配信時に WOFF に変換するだけで済みます。サイズは元の TTF / OTF と比べて約 40〜50% 小さくなり、Web パフォーマンスに大きく寄与しました。

WOFF にはもうひとつ重要な特徴があります。フォントファイル内に メタデータブロック（XML 形式）を持てることです。フォントの作者・ライセンス URL・配布元 URL などを構造化された形で埋め込めるため、ブラウザの開発者ツールや解析ツールがこれを抽出できます。「Web で配ったフォントが孤児（orphan）になりにくい」という設計思想の現れです。

2014 年には WOFF 2.0 が登場し、圧縮を Brotli に置き換えてさらに 30% 程度サイズを削減しました。2026 年現在では WOFF2 が事実上の標準 となっており、WOFF 1.0 は IE9〜11 や旧 Android ブラウザなどの古い環境のフォールバックとしてのみ残っているのが実情です。新規サイトで WOFF 1.0 を提供する必要はほぼなくなりました。

内部構造

セクション	役割
WOFF ヘッダ	マジックナンバー wOFF、SFNT 種別、テーブル数、合計サイズ、メタデータオフセット
テーブルディレクトリ	各 SFNT テーブルの zlib 圧縮済みオフセット・サイズ
圧縮テーブルデータ	個々の SFNT テーブル（cmap, glyf 等）を zlib で圧縮したもの
メタデータブロック	XML 形式の作者・ライセンス情報（任意・zlib 圧縮）
プライベートデータ	フォント作者が自由に埋め込める領域

「テーブル単位で zlib 圧縮」が WOFF 1.0 の特徴です。テーブルを個別に展開できるため、ブラウザは必要なテーブルだけを優先的に解凍できます。

主な用途と CSS 設定

Web フォントとして @font-face で読み込むのが唯一の使い方です。古いブラウザ対応が必要な場合は、現代的な書き方では WOFF2 を最初に並べ、WOFF をフォールバックとして指定します。

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("/fonts/NotoSansJP-Regular.woff2") format("woff2"),
    url("/fonts/NotoSansJP-Regular.woff")  format("woff");
  unicode-range: U+0000-007F, U+3000-9FFF;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

ブラウザは src リストの先頭から順に試し、対応している最初の形式を取得します。WOFF2 対応ブラウザ（モダンブラウザすべて）は WOFF2 のみダウンロードし、WOFF は読まれません。

関連形式との比較

項目	WOFF 1.0	WOFF2	TTF / OTF 直配信	EOT
圧縮	zlib（Deflate）	Brotli	なし	独自（MTX）
圧縮率	約 50%	約 30%（TTF 比）	—	低い
ブラウザ対応	IE9+ / 主要全	モダン全（IE 非対応）	全（しかし非推奨）	IE のみ
標準化	W3C 勧告 2012	W3C 勧告 2018	—	非標準
2026 年の立ち位置	フォールバック	事実上標準	非推奨	廃止

編集ツール（変換）

• fonttools / sfnt2woff-zopfli（Python）：fonttools ttLib で TTF → WOFF 変換が可能。Zopfli を使うとさらに圧縮できる。
• Transfonter（Web）：ブラウザで TTF / OTF をアップロードすると WOFF / WOFF2 / EOT 一式と CSS テンプレートを返してくれる老舗サービス。
• FontSquirrel Webfont Generator（Web）：同じく定番。サブセット化・ヒンティング調整も GUI で行える。
• woff2_compress（Google 公式 CLI）：本来は WOFF2 用だが、関連ツール群で WOFF も扱える。

注意点・落とし穴

• CORS 必須：別ドメイン CDN から配信する場合、サーバーは Access-Control-Allow-Origin: *（または特定ドメイン）を返さないとブラウザがフォントを拒否する。これは @font-face 由来の制約。
• MIME タイプ：font/woff（RFC 8081）が現代の正解。古い設定で application/octet-stream や application/x-font-woff を返すと一部ブラウザが警告する。
• サブセット化していないと無意味：日本語フォントを全 CJK 漢字込みで配ると WOFF 化しても 5MB 級になる。unicode-range で分割しないと初回表示が壊滅的に遅い。
• FOIT / FOUT：フォント読み込み中に文字が見えない（FOIT）か、フォールバックで一瞬表示されて差し替わる（FOUT）か。font-display: swap を指定するのが現代の定石。
• WOFF1 単体配信は時代遅れ：WOFF2 を主、WOFF1 をフォールバックに。WOFF1 のみは古いブラウザ専用サイトでしか正当化されない。

関連リンク

• フォント（親カテゴリ）
• ファイル拡張子とは（概論）
• TTF（.ttf）
• OTF（.otf）
• WOFF2（.woff2）
• EOT（.eot）
• CSS（.css）