WOFF2
Definition
WOFF stands for Web Open Font Format. The first version, a W3C Recommendation in 2012, wrapped an existing font in zlib compression. WOFF2 followed as a Recommendation in March 2018 and changed two things: it compresses with Brotli rather than zlib, and it applies a font-specific preprocessing step that rearranges the glyph tables into a form Brotli handles better. The result is about 30 per cent smaller than WOFF for the same typeface, and roughly half the size of the raw TTF or OTF it was made from — a face that is 180 KB as a TTF lands near 90 KB as WOFF2. The container carries the original font's tables unchanged, so hinting, kerning and OpenType features all survive. Its registered content type is font/woff2, and the file is already compressed, so applying gzip or Brotli again at the server achieves nothing.
Why It Matters
Support has not been a question for years: every current browser, and every version since Chrome 36, Firefox 39, Safari 10 and Edge 14, reads WOFF2, which in practice is over 97 per cent of traffic. That means the old defensive stack — EOT for Internet Explorer, TTF for old Android, SVG fonts for ancient iOS — is now dead weight, and a @font-face rule listing four formats simply gives the browser more to parse for no benefit. Dropping to WOFF2 alone typically removes three unused files per weight from a build. The savings compound with subsetting: a Latin subset of a variable face can come in under 25 KB, which is less than a single small photograph and renders every heading on the page.
How It Works
A @font-face rule points src at the file with format set to woff2, the browser downloads it once an element on the page actually uses the family, and it decompresses the Brotli stream into the original font tables in memory. Because the file is opaque compressed data, set a long Cache-Control max-age on it — a year is normal — and put a hash or version in the filename when the font itself changes, since fonts are the least volatile asset on most sites. Subsetting is the tool that matters most for size: pyftsubset from the fonttools package takes a Unicode range and writes a new WOFF2 with only those glyphs, and glyphhanger will work out which characters your pages actually use. A static host serves the file as it was uploaded, so the subsetting and the conversion both happen before publishing.
Real-World Example
A documentation site at docs-mkr.99helpers.site ships two WOFF2 files totalling 61 KB, subset to Latin and served from the same origin as the pages. The build had originally included EOT, TTF and WOFF fallbacks alongside them, eight files in all and 480 KB of font data, of which the browsers only ever fetched the two WOFF2. Removing the rest changed nothing visible and cut the upload by more than three quarters. With a one-year cache header on the fonts folder, repeat visitors fetch no font bytes at all.
Common Mistakes
- ✕Keeping EOT, SVG and TTF fallbacks in the @font-face stack — no browser in use needs them, and they bulk out the deployment for nothing
- ✕Compressing WOFF2 again at the server or CDN — the payload is already Brotli-compressed, so the second pass costs processor time and can slightly increase the size
- ✕Serving the file with a generic binary content type instead of font/woff2 — usually harmless, but it breaks caching rules and analytics that key on the type
- ✕Shipping the whole family when three weights are used — a single variable WOFF2 with a weight axis often replaces four static files at a lower total size
Related Terms
Web Font
A web font is a typeface downloaded by the browser as part of the page, so the text renders in your chosen face rather than whatever the reader's device happens to have. It is an extra file on the critical path, and it decides whether text appears immediately or after a pause.
Brotli Compression
Brotli is a lossless compression format for HTTP responses, published by Google in 2015 and supported by every current browser. On text it usually beats gzip by 15 to 20 percent, at the cost of more CPU time to compress.
Cache-Control
The HTTP response header that tells browsers and caches whether they may keep a copy of a file, for how long, and who is allowed to. It is the single biggest lever over how fast a site feels on a second visit.
Page Speed
Page speed is how quickly a page becomes useful to the person who opened it — not one number, but a set of measurements covering when content appears and when the page responds to input.
Web Asset
A web asset is any supporting file a page pulls in once the HTML has arrived — stylesheets, scripts, images, fonts, icons, videos. The HTML is the page; the assets are everything it asks for next.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →