WOFF (Web Open Font Format)

WOFF (Web Open Font Format) は、Mozilla が Type Supply や LettError、他の組織と提携して開発した新しいウェブフォント形式です。これは、TrueType および OpenType, Open Font Format に使用されているテーブルベースの sfnt 構造と同じ圧縮されたバージョンを使用しています。WOFF には、これにメタデータと個人利用のためのデータ構造が追加されており、作成者とベンダーがライセンス情報を書き込むことができる予約フィールドも含まれています。

WOFF の使用には主に 3 つの利点があります。

  1. フォントデータが圧縮されているため、サイトで WOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。
  2. TrueType または OpenType 形式のフォントをウェブで使用するためにライセンスすることに消極的な多くのフォントベンダーは、 WOFF 形式のフォントをライセンスしています。これにより、サイトデザイナーはフォントを利用できるようになります。
  3. WOFF 形式は、独占的ソフトウエアベンダーもフリーソフトウエアブラウザベンダーも好んで使用しているため、現在の他のフォント形式とは異なり、真に普遍的で相互運用可能なウェブ用フォント形式になる可能性を持って居案す。

WOFF には WOFF と WOFF2 という、2 つのバージョンがあります。これらの主な違いは、使用する圧縮アルゴリズムです。@font-face では format 記述子で、それぞれ 'woff''woff2' で識別されます。

WOFF の使用

ウェブコンテンツのテキストに WOFF フォントを使用するには、CSS の @font-face プロパティを使用します。これは、OpenType や TrueType 形式のフォントの使用方法と同じです。WOFF 形式のフォントは圧縮されているため、より効率的にコンテンツがダウンロードされるでしょう。

WOFF フォントを扱うためのツール

仕様書

Specification
WOFF File Format 1.0
# OverallStructure
WOFF File Format 2.0
# FileStructure

ブラウザーの互換性

css.at-rules.font-face.WOFF

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WOFF

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.at-rules.font-face.WOFF_2

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WOFF 2

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報