WOFF or WOFF2?
Both wrap the same font for the web; they differ in compression. WOFF compresses each table of the font separately with zlib, the same method as a ZIP file. WOFF2, its successor, uses Brotli and transforms the glyph data first. In our tests that made WOFF2 files about a quarter smaller than WOFF:
| Font | TTF | WOFF | WOFF2 |
|---|---|---|---|
| Arial Regular | 1,037 KB | 542 KB | 414 KB |
| Bahnschrift (variable) | 371 KB | 211 KB | 160 KB |
So for a site that only needs to work in current browsers, TTF to WOFF2 is the better conversion.
When WOFF still makes sense
- Old browsers
- Internet Explorer 9 to 11 and some older mobile browsers read WOFF but not WOFF2. Serving both lets them fall back.
- Tools that ask for it
- Some older website builders, themes and plugins have an upload field that only accepts .woff.
- Speed of conversion
- WOFF encodes almost instantly, even for very large fonts, where WOFF2 can take several seconds.
Serving WOFF2 with a WOFF fallback
List WOFF2 first. Browsers take the first format they understand, so modern ones download only the smaller file:
@font-face {
font-family: "Your Font";
src: url("/fonts/your-font.woff2") format("woff2"),
url("/fonts/your-font.woff") format("woff");
font-display: swap;
}Lossless, and checked
WOFF stores each table either compressed or, when compression wouldn't help, as is. Nothing in the font is changed. We checked this the strict way: converting a TTF to WOFF and back gives a font whose every table matches the original byte for byte. Refont uses your browser's own built-in compression for this, so no extra code has to download.
Web use usually needs a webfont license. The format doesn't change what your font license allows. How font licensing works