WOFF vs WOFF2: What’s the Difference?

If you self-host web fonts, you will keep running into two file extensions: .woff and .woff2. They are not different typefaces — they are different container formats that package the same font outlines with compression and metadata so they transfer efficiently over the web. The question is which one to serve, and whether you still need both.

What WOFF is

WOFF (Web Open Font Format), introduced around 2010, takes a TrueType or OpenType font and compresses its internal tables using zlib — the same gzip-class compression used widely across the web. It also adds room for metadata such as licence information. WOFF became a web standard and is supported by essentially every browser, which is why it served for years as the reliable baseline web font format.

What WOFF2 is

WOFF2 arrived later (it became a standard recommendation in 2018) with the same basic idea but a better engine. Two changes matter:

• Brotli compression replaces zlib. Brotli generally achieves better ratios on this kind of data.
• Font-aware preprocessing. WOFF2 rearranges the data in the glyph outline tables (glyf and loca) before compressing, and compresses all tables together rather than one at a time. This structural step squeezes out extra bytes a generic compressor would miss.

The glyphs themselves are untouched, so a WOFF2 file renders identically to the same font in WOFF or raw TTF.

How much smaller is WOFF2?

The commonly cited figure is that WOFF2 is roughly 30% smaller than WOFF, though the exact saving depends on the font. One analysis reported an average file-size improvement of about 27% on TrueType-outline fonts, with a smaller gain on CFF (PostScript-outline) fonts. The font-aware glyph transform alone has been measured as contributing a median reduction on the order of 14% on top of Brotli. These are typical results, not guarantees — the only way to know your own saving is to convert your font and compare the output sizes, because a small single-weight Latin font behaves very differently from a large multi-script family. Treat the 30% figure as a reasonable expectation, not a promise.

Here is a rough comparison of the two formats:

Browser support

WOFF2 is supported by all current browsers and has been for years, which is why it is now the primary format for web fonts. WOFF’s advantage is reaching very old browsers that predate WOFF2 support. In practice, the number of visitors stuck on such browsers is tiny for most sites, so many teams serve WOFF2 only. If you need maximum reach, you can list both and let the browser pick.

Where the WOFF2 savings come from

It is worth understanding why Brotli alone does not tell the whole story. A generic compressor treats the font as an opaque stream of bytes. WOFF2 is smarter because it knows it is compressing a font: before Brotli runs, it transforms the glyph outline tables into a form that compresses better, and it compresses all the tables together so Brotli can find patterns across them rather than one table at a time. That combination — a font-aware transform plus a stronger general compressor — is why WOFF2 consistently beats WOFF even though both ultimately ship the same outlines. The glyphs are reconstructed byte-for-byte when the browser decodes the file, so nothing about the rendered result changes.

Other formats you can drop

Older tutorials sometimes show a long src list with TTF, EOT and even SVG fonts for maximum compatibility. For the modern web this is obsolete. EOT only ever mattered for very old Internet Explorer; SVG fonts are deprecated; and raw TTF files are simply uncompressed compared with WOFF/WOFF2. Shipping them today just adds bytes and complexity. A current stack is WOFF2, optionally with a WOFF fallback, and nothing else.

What to serve in practice

The cleanest modern approach is a single WOFF2 file per weight and style. If you want a safety net for legacy clients, declare WOFF2 first and WOFF second in your @font-face src; browsers use the first format they understand:

@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); font-display: swap; }

Combine WOFF2 with subsetting (so the file contains only the glyphs you need), preloading (so the download starts early), and a sensible font-display value (so text paints without a long flash). Format choice is one piece of font performance; these techniques work together. If you use a font service such as Google Fonts, all of this is handled for you — WOFF2 and Unicode-range subsets are served automatically — so the manual decision mainly matters when you self-host.

Frequently asked questions

Is WOFF2 always better than WOFF?

For file size and modern browser support, yes — WOFF2 is smaller thanks to Brotli and glyph preprocessing, and every current browser supports it. The only reason to keep WOFF is to support very old browsers that cannot read WOFF2, which is a shrinking audience.

Do WOFF and WOFF2 look different?

No. Both are just compressed containers around the same font outlines. The glyphs render identically; only the download size and the compression method differ.

Do I need to include WOFF as a fallback?

Usually not. WOFF2 support is effectively universal among browsers still in use. Include a WOFF fallback only if your analytics show meaningful traffic from very old browsers. Listing WOFF2 first and WOFF second costs nothing for modern visitors, since they only download the WOFF2.

Can I convert a font to WOFF2 myself?

Yes, with open-source tools such as woff2_compress or fonttools, provided the font licence permits creating web font formats. Many foundries also supply WOFF2 files directly, and services like Google Fonts serve WOFF2 automatically.

Is WOFF2 slower to decode because of Brotli?

No. Testing has found WOFF2 decompression to be competitive with or faster than WOFF at typical sizes, and the smaller download usually outweighs any decode cost. For practical web use, WOFF2 is the faster overall choice.