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 勧告 最初期の仕様

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@font-faceChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
SVG fonts
非推奨非標準
Chrome 未対応 1 — 38Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 15 — 25Safari 完全対応 3.2WebView Android 未対応 ≤37 — 38Chrome Android 未対応 18 — 38Firefox Android 未対応 なしOpera Android 未対応 14 — 25Safari iOS 完全対応 3Samsung Internet Android 未対応 1.0 — 3.0
WOFFChrome 完全対応 6Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 11.1Safari 完全対応 5.1WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11.1Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0
WOFF 2Chrome 完全対応 36Edge 完全対応 14Firefox 完全対応 39
完全対応 39
完全対応 35
無効
無効 From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 23Safari 完全対応 10
補足
完全対応 10
補足
補足 Supported only on macOS 10.12 (Sierra) and later.
WebView Android 完全対応 37Chrome Android 完全対応 36Firefox Android 完全対応 39
完全対応 39
完全対応 35
無効
無効 From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 24Safari iOS 完全対応 10Samsung Internet Android 完全対応 3.0
font-displayChrome 完全対応 72Edge 完全対応 79Firefox 完全対応 58IE 未対応 なしOpera 完全対応 60Safari 完全対応 11.1WebView Android 完全対応 72Chrome Android 完全対応 72Firefox Android 完全対応 58Opera Android 完全対応 51Safari iOS 完全対応 11.3Samsung Internet Android 未対応 なし
font-familyChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 6Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 2.2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0
font-feature-settingsChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
補足
完全対応 34
補足
補足 The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
完全対応 15
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
補足
完全対応 34
補足
補足 The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
完全対応 15
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
font-stretchChrome 完全対応 62Edge 完全対応 17Firefox 完全対応 62IE 未対応 なしOpera 完全対応 49Safari 完全対応 10.1WebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 完全対応 62Opera Android 完全対応 41Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
font-styleChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
font-variation-settingsChrome 完全対応 62Edge 完全対応 79Firefox 完全対応 60
無効
完全対応 60
無効
無効 From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 49Safari 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 完全対応 60
無効
完全対応 60
無効
無効 From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
font-weightChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
srcChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 6Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 2.2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0
unicode-rangeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 36IE 完全対応 9Opera 完全対応 15Safari 完全対応 3.2WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 36Opera Android 完全対応 14Safari iOS 完全対応 3Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報