WOFF2

WOFF2 was developed by Google and became a W3C Recommendation in March 2018. It builds on the original WOFF concept but replaces zlib compression with Brotli — a compression algorithm also developed by Google — which achieves significantly better compression ratios.

But WOFF2 isn't just "WOFF with better compression." It introduces a preprocessing transform that restructures font data before compression, making it substantially more compressible. For TrueType outlines, this means applying predictive coding to glyph coordinates — encoding each point as a delta from a predicted value rather than as an absolute coordinate. The result is a much more redundant byte stream that Brotli can compress aggressively.

This two-step approach — domain-specific preprocessing followed by general-purpose compression — is why WOFF2 consistently produces the smallest font files of any format.

WOFF2 applies a two-phase compression pipeline to the source font data:

• Phase 1: Preprocessing transform — font-specific transforms restructure the data to maximize compressibility. For TrueType glyph outlines, this uses predictive coding of coordinates — each point is encoded as the difference from a predicted position, which produces much smaller numbers. Similar transforms are applied to other font tables.
• Phase 2: Brotli compression — the preprocessed data is then compressed with Brotli, which combines LZ77 sliding-window compression with Huffman coding and a built-in static dictionary. Brotli achieves 20-30% better compression than zlib on typical font data.

On the browser side, the process reverses: Brotli decompression followed by inverse transforms to reconstruct the original font tables. Despite the extra step, WOFF2 decompression is actually faster than WOFF1 — Brotli was designed for fast decoding, and the smaller file transfers faster over the network.

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2');
  font-display: swap;
}

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

Notice that we only list a single src — WOFF2 alone. With 97%+ browser coverage, many modern projects no longer need a fallback format. The font-display: swap directive tells the browser to show text immediately using a fallback font while the icon font loads, preventing invisible text.

WOFF2 enjoys broad support across all modern browsers. The only significant gap is Internet Explorer, which was retired by Microsoft in June 2022.

Combined global coverage sits at approximately 97%. The remaining ~3% consists almost entirely of legacy IE installations and very old mobile browsers.

To illustrate WOFF2's compression advantage, here are typical file sizes for an icon font containing 200 glyphs:

The savings compound with larger icon sets. A 500-glyph font might be 200 KB as TTF, 120 KB as WOFF, and just 82 KB as WOFF2. Over thousands of page loads, these kilobytes translate directly into faster paint times and lower bandwidth costs.

Always. WOFF2 should be the default format for any web-based icon font deployment. It delivers the smallest files, the fastest decompression, and near-universal browser support.

The only scenario where you would not use WOFF2 is if you're targeting Internet Explorer — in which case, pair it with WOFF as a fallback:

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

Modern browsers will grab the WOFF2 file; IE 11 will fall through to WOFF. Everyone gets the font, everyone gets it compressed.