WOFF2: Browser Support, Features, Known Issues

What is WOFF2?

WOFF2 is a web font file format that the W3C Web Fonts Working Group standardized for delivering TrueType and OpenType fonts to browsers. It wraps the underlying font in a Brotli-compressed container, uses the file extension .woff2, the MIME type font/woff2, and is referenced from CSS @font-face rules with format("woff2").

Which browsers does WOFF2 support?

WOFF2 works in every modern desktop and mobile browser, with global support around 97%. Internet Explorer is the only major browser that never added WOFF2 support, and very early Safari builds on macOS need a TrueType outline before they accept the file.

What are the key features of WOFF2?

WOFF2 keeps the same goals as WOFF 1.0, smaller fonts and better caching, but uses a tighter compression and a richer file structure. The main features map to faster downloads, broader font coverage, and clean caching for production sites.

• Brotli compression: WOFF2 wraps the font tables in a Brotli-compressed stream, which is about 30% smaller than the zlib stream used by WOFF 1.0 and up to 50% smaller than the raw TTF or OTF file.
• TrueType, OpenType, and variable fonts: The container holds any TrueType, OpenType, or OpenType variable font, including chromatic fonts and font collections, without re-encoding the underlying tables.
• 48-byte fixed header: Every WOFF2 file starts with a 48-byte header that names the magic number wOF2, the file size, and the table count, which keeps the format easy to validate at the byte level.
• Standard MIME type: WOFF2 ships with the IANA-registered MIME type font/woff2, so NGINX, Apache, and most CDNs serve the right Content-Type out of the box.
• Preprocessed table directory: The directory entry for each table records both the original size and the transformed size, which lets the browser precompute decompression buffer sizes.
• Optional metadata block: WOFF2 reserves an XML metadata block for license, vendor, and copyright information that font tools can read without decompressing the font.
• Royalty-free W3C Recommendation: The format is a royalty-free W3C Recommendation maintained by the Web Fonts Working Group, with a Google reference implementation that ships in Chrome.

How do you use WOFF2 with @font-face?

You ship WOFF2 by converting the source font, hosting the .woff2 file on your origin or CDN, and pointing a CSS @font-face rule at it with the format("woff2") descriptor. The steps below cover the path most production sites follow.

• Convert your font to WOFF2: Run fontTools (Python pip install fonttools brotli) or the Google woff2 reference compressor over your TTF or OTF file. Online converters like CloudConvert or Transfonter also work for one-off jobs.
• Upload the .woff2 file to your origin or CDN: Drop the file in a /fonts directory on your web server or push it to your CDN. Keep the file path stable so long-cache headers work.
• Set the MIME type to font/woff2: Confirm your server adds Content-Type: font/woff2 for .woff2 files. NGINX and Apache do this by default, but custom servers or older CDN configs may need a mime.types update.
• Add the @font-face rule: Reference the file in a CSS @font-face block with the format("woff2") descriptor and the matching font-family name. Add a WOFF or TTF fallback only if you still serve Internet Explorer or pre-2015 mobile browsers.
• Apply font-display: swap: Add font-display: swap inside the @font-face rule so the browser renders fallback text right away and swaps in the WOFF2 font once it loads, instead of leaving an invisible block of text.
• Confirm in DevTools: Open the Network panel, filter by Font, and reload. The .woff2 request should return 200 with Content-Type: font/woff2 and a Cache-Control header that lets the browser reuse the file across pages.

/* Load a WOFF2 font with a WOFF fallback for legacy browsers. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular.woff2") format("woff2"),
       url("/fonts/inter-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

If the font does not appear, check that the .woff2 file path returns 200 and that the Content-Type header is font/woff2. A 404 or a wrong MIME type silently disables the rule and the browser falls back to the next system font.

What are the known issues with WOFF2?

WOFF2 has the broadest browser reach of any modern web font format, but a small set of edge cases still trip up production rollouts. The most common ones land on legacy browsers, server config, and the heavier Brotli decompression cost.

• Internet Explorer never supported it: IE 9, 10, and 11 cannot load WOFF2 in any build. Sites with IE traffic still need a WOFF entry inside the same @font-face rule, or the browser drops to the system font.
• Older Safari rejects CFF outlines: Safari 10 and 11 on macOS Sierra and High Sierra accept WOFF2 only when the inner font is a TrueType outline. WOFF2 files that wrap a CFF (PostScript) outline silently fail in those Safari builds.
• Wrong MIME type breaks caching: Some older CDN configs return application/octet-stream instead of font/woff2. The font usually still loads, but cross-origin caching and Service Worker rules treat it as a generic blob and skip the long-cache path.
• Brotli decompression costs more CPU: Brotli is heavier than zlib, so very low-end Android phones spend a few extra milliseconds decoding each WOFF2 file at first paint. The bandwidth saving still wins on cellular networks but is small on a fast LAN.
• CORS quirks on cross-origin fonts: Browsers require an Access-Control-Allow-Origin header on cross-origin font requests. A WOFF2 file served from a CDN without CORS headers loads in DevTools but fails the @font-face rule with a CORS error.
• WOFF2 files do not double-compress: Serving WOFF2 with Content-Encoding: gzip or br on top of the existing Brotli stream wastes CPU and saves no bytes. Set your server to skip compression for .woff2 files.
• Variable fonts inside WOFF2 need a recent decoder: Variable fonts work in Chrome 62+, Firefox 62+, Edge 17+, and Safari 11+. Older browsers that already handle plain WOFF2 may render only the default named instance and ignore the variation axes.

In my experience, the trickiest WOFF2 failure is a Safari 10 or 11 visitor seeing the system font on a page that renders correctly in Chrome and Firefox. The browser silently drops the @font-face rule because the inner outline is CFF, with no console warning. Always test the WOFF2 file with a TrueType outline if you still target older macOS users, and keep a WOFF fallback in the same src list as a safety net.

Citations

All WOFF2 version numbers, spec details, and platform notes in this guide come from these primary sources:

• W3C - WOFF File Format 2.0 Recommendation: w3.org/TR/WOFF2
• W3C - WOFF 2.0 Implementation Report: w3.org/Fonts/WG/WOFF2/Implementation.html
• MDN Web Docs - Web Open Font Format (WOFF): developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/WOFF
• MDN Web Docs - @font-face: developer.mozilla.org/en-US/docs/Web/CSS/@font-face
• Wikipedia - Web Open Font Format: en.wikipedia.org/wiki/Web_Open_Font_Format
• Wikipedia - Brotli: en.wikipedia.org/wiki/Brotli
• Google - WOFF2 reference implementation: github.com/google/woff2
• fontTools - woff2 module documentation: fonttools.readthedocs.io/en/stable/ttLib/woff2.html
• WebKit - Safari 12 release notes: developer.apple.com/documentation/safari-release-notes/safari-12-release-notes
• Chrome Platform Status - WOFF 2.0: chromestatus.com/feature/5712863060033536
• IANA - font/woff2 media type registration: iana.org/assignments/media-types/font/woff2