WOFF (Web Open Font Format)
WOFF (Web Open Font Format) は、Mozilla が Type Supply や LettError、他の組織と提携して開発した新しい Web フォント形式です。これは、TrueType および OpenType, Open Font Format に使用されているテーブルベースの sfnt
構造と同じ圧縮されたバージョンを使用しています。WOFF には、これにメタデータと個人利用のためのデータ構造が追加されており、作成者とベンダーがライセンス情報を書き込むことができる予約フィールドも含まれています。
WOFF の使用には 3 つの利点があります:
- フォントデータが圧縮されているため、サイトで WOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。
- 自社の TrueType や OpenType 形式のフォントが Web 上で使用されることを許可したくない多くのフォントベンダーは、WOFF 形式のフォントなら使用を許可できるでしょう。これは、サイトのデザイナーに対してフォントの可用性を高めることになります。
- プロプライエタリなブラウザベンダーもフリーソフトウェアのブラウザベンダーも、WOFF 形式を好んでいます。つまり、他の既存のフォント形式と異なり、WOFF 形式のフォントが、Web のための真にユニバーサルで相互運用が可能なフォント形式になる可能性があります。
WOFF と WOFF2 という、2 つのバージョンの WOFF があります。これらの主な違いは、使用する圧縮アルゴリズムです。@font-face
では format
記述子で、それぞれ 'woff'
と 'woff2'
で識別されます。
WOFF の使用
Web コンテンツのテキストに WOFF フォントを使用するには、@font-face
CSS プロパティを使用します。これは、OpenType や TrueType 形式のフォントの使用方法と同じです。WOFF 形式のフォントは圧縮されているため、より効率的にコンテンツがダウンロードされるでしょう。
WOFF フォントを扱うためのツール
- WOFF フォントを扱うためのツールを利用できます。
sfnt2woff
およびwoff2sfnt
は、WOFF と OpenType の間の変換を行います。
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
WOFF File Format 2.0 | 勧告 | 新しい圧縮アルゴリズム |
WOFF File Format 1.0 | 勧告 | 最初期の仕様 |
ブラウザ実装状況
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@font-face | ||||||||||||
SVG fonts | ||||||||||||
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') | ||||||||||||
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.