MDN Plus now available in your country! Support MDN and make it your own. Learn more

WOFF (Web Open Font Format)

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

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

  1. フォントデータが圧縮されているため、サイトで WOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。
  2. 自社の TrueType や OpenType 形式のフォントが Web 上で使用されることを許可したくない多くのフォントベンダーは、WOFF 形式のフォントなら使用を許可できるでしょう。これは、サイトのデザイナーに対してフォントの可用性を高めることになります。
  3. プロプライエタリなブラウザベンダーもフリーソフトウェアのブラウザベンダーも、WOFF 形式を好んでいます。つまり、他の既存のフォント形式と異なり、WOFF 形式のフォントが、Web のための真にユニバーサルで相互運用が可能なフォント形式になる可能性があります。

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

WOFF の使用

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

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

仕様

仕様書 策定状況 コメント
WOFF File Format 2.0 勧告 新しい圧縮アルゴリズム
WOFF File Format 1.0 勧告 最初期の仕様

ブラウザ実装状況

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
@font-face
SVG fonts
DeprecatedNon-standard
WOFF
WOFF 2
ascent-override
descent-override
font-display
font-family
font-feature-settings
font-stretch
font-style
font-variant
font-variation-settings
font-weight
line-gap-override
size-adjust
src
format(keyword)
format('*-variations')
Non-standard
unicode-range

Legend

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.

関連情報