WOFF

WOFF 1.0 was developed jointly by Mozilla, Opera, and Microsoft as the first font format built from the ground up for the web. It became a W3C Recommendation in December 2012, marking a milestone in web typography.

At its core, WOFF is a wrapper around existing TrueType or OpenType font data. It applies zlib compression to reduce file size and includes optional metadata fields for licensing and attribution. Before WOFF, web developers had to serve raw TTF or OTF files — large, uncompressed, and lacking any standard way to embed licensing information.

The key innovation was creating a purpose-built web font container that solved three problems at once: smaller file sizes through compression, a standard metadata block for font licensing, and a format that browsers could easily validate and sandbox for security.

The WOFF container wraps existing font tables (from TTF or OTF source files) with per-table zlib compression. Each table in the original font — glyph outlines, kerning data, naming records — is compressed independently, which allows the browser to decompress only the tables it needs.

The WOFF header begins with a four-byte signature (wOFF), followed by the font flavor (indicating whether the wrapped data is TrueType or CFF), the total compressed size, and a pointer to the optional metadata block. The browser reads this header, decompresses the individual tables back to their original form, and hands the reconstructed font data to the text rendering engine.

From the rendering engine's perspective, a decompressed WOFF file is identical to the original TTF or OTF — the compression is entirely transparent.

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

The browser tries each src entry in order. Modern browsers will load the WOFF2 file (smaller, faster); older browsers that don't understand WOFF2 will fall back to the WOFF file. This cascading approach gives you optimal performance with maximum compatibility.

WOFF has been supported by all major browsers since the early 2010s, making it the safest fallback format for web fonts. It covers an even wider range of browsers than WOFF2 because it includes support for older versions of Internet Explorer.

With 98%+ global browser coverage, WOFF is understood by virtually every browser still in active use. The only notable gap is IE 6-8, which requires EOT instead.

WOFF2 is the successor to WOFF, and in most practical terms, it's a strict improvement. Here's how they compare:

WOFF2 offers roughly 30% better compression than WOFF thanks to Brotli and a specialized preprocessing step that makes glyph data more compressible. It's also faster to decompress. Modern browser support for WOFF2 is equally broad — the only gap is Internet Explorer 9-11, which supports WOFF but not WOFF2.

For most projects targeting browsers from 2024 onward, WOFF2 alone is sufficient. WOFF's only remaining advantage is coverage of IE 9-11.

Despite being superseded by WOFF2, there are still valid reasons to include WOFF in your font stack:

• As a fallback alongside WOFF2 — list WOFF2 first in your @font-face declaration and WOFF second, giving modern browsers the smaller file while ensuring older browsers still get the font.
• When IE 11 support is required — IE 11 supports WOFF but not WOFF2, so WOFF is the best compressed format available for that browser.
• In environments without Brotli — some older build tools, proxies, or CDNs may not handle WOFF2's Brotli compression correctly; WOFF's zlib compression is universally supported.

If none of these apply to your project, you can safely skip WOFF and ship WOFF2 only.