WOFF (the Web Open Font Format) is a web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It uses a compressed version of the same table-based sfnt
structure used by TrueType, OpenType, and Open Font Format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired.
There are three main benefits to using WOFF:
- The font data is compressed, so sites using WOFF will use less bandwidth and will load faster than if they used equivalent uncompressed TrueType or OpenType files.
- Many font vendors that are unwilling to license their TrueType or OpenType format fonts for use on the web will license WOFF format fonts. This improves availability of fonts to site designers.
- Both proprietary and free software browser vendors like the WOFF format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.
There are two versions of WOFF; WOFF and WOFF2, they mostly differ in regard to the compression algorithm used. In @font-face
they are identified by the 'woff'
and respectively 'woff2'
format
descriptor.
Using WOFF
You can use the @font-face
CSS property to use WOFF fonts for text in web content. It works exactly like OpenType and TrueType format fonts do, except it will likely let your content download more efficiently due to the addition of compression.
Tools for working with WOFF fonts
- Tools for working with WOFF fonts are available.
sfnt2woff
andwoff2sfnt
convert between WOFF and OpenType.
Specifications
Specification | Status | Comment |
---|---|---|
WOFF File Format 2.0 | Recommendation | New compression algorithm |
WOFF File Format 1.0 | Recommendation | Initial specification. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@font-face | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 4 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
SVG fonts | Chrome No support 1 — 38 | Edge No support No | Firefox No support No | IE No support No | Opera No support 15 — 25 | Safari Full support 3.2 | WebView Android No support ≤37 — 38 | Chrome Android No support 18 — 38 | Firefox Android No support No | Opera Android No support 14 — 25 | Safari iOS Full support 3 | Samsung Internet Android No support 1.0 — 3.0 |
WOFF | Chrome Full support 6 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 9 | Opera Full support 11.1 | Safari Full support 5.1 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 11.1 | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 |
WOFF 2 | Chrome Full support 36 | Edge Full support 14 | Firefox
Full support
39
| IE No support No | Opera Full support 23 | Safari
Full support
10
| WebView Android Full support 37 | Chrome Android Full support 36 | Firefox Android
Full support
39
| Opera Android Full support 24 | Safari iOS Full support 10 | Samsung Internet Android Full support 3.0 |
font-display | Chrome Full support 72 | Edge Full support 79 | Firefox Full support 58 | IE No support No | Opera Full support 60 | Safari Full support 11.1 | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox Android Full support 58 | Opera Android Full support 51 | Safari iOS Full support 11.3 | Samsung Internet Android No support No |
font-family | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 6 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support 2.2 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
font-feature-settings | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
font-stretch | Chrome Full support 62 | Edge Full support 17 | Firefox Full support 62 | IE No support No | Opera Full support 49 | Safari Full support 10.1 | WebView Android Full support 62 | Chrome Android Full support 62 | Firefox Android Full support 62 | Opera Android Full support 41 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 6.0 |
font-style | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 4 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
font-variation-settings | Chrome Full support 62 | Edge Full support 79 | Firefox
Full support
60
| IE No support No | Opera Full support 49 | Safari No support No | WebView Android Full support 62 | Chrome Android Full support 62 | Firefox Android
Full support
60
| Opera Android Full support 46 | Safari iOS No support No | Samsung Internet Android Full support 8.0 |
font-weight | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 4 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
src | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 6 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support 2.2 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
unicode-range | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 36 | IE Full support 9 | Opera Full support 15 | Safari Full support 3.2 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 36 | Opera Android Full support 14 | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.