What is a WOFF2 file?
WOFF2 (Web Open Font Format 2.0) is the successor to the original WOFF font format, developed by Google and standardized as a W3C Recommendation in 2018. It replaces zlib compression with Google’s Brotli algorithm and applies additional font-specific preprocessing (byte transforms) before compression. The result is font files approximately 30% smaller than WOFF and 50-60% smaller than raw TTF/OTF — making WOFF2 the most compact web font format available.
WOFF2 is now the preferred and standard format for web font delivery. All modern browsers support it (Chrome, Firefox, Safari, Edge, Opera), covering over 95% of global web users. Google Fonts serves all fonts as WOFF2 by default.
How to open WOFF2 files
- All modern web browsers — Natively rendered via CSS
@font-face - FontForge (Windows, macOS, Linux) — Free font editor with WOFF2 read/write support
- Google Fonts (Web) — The world’s largest WOFF2 font library
- FontDrop (Web) — Online font inspector and Unicode coverage viewer
- Glyphs (macOS) — Professional font design and export tool
Technical specifications
| Property | Value |
|---|---|
| Compression | Brotli (with font-specific byte transforms) |
| Size reduction | ~50-60% smaller than TTF, ~30% smaller than WOFF |
| Font data | Wraps TTF or OTF with preprocessing |
| W3C Standard | W3C Recommendation (2018) |
| Magic bytes | 77 4F 46 32 (wOF2 in ASCII) |
| MIME type | font/woff2 |
| Browser support | All modern browsers (Chrome 36+, Firefox 35+, Safari 10+, Edge 14+) |
Common use cases
- Web fonts: The optimal format for serving custom fonts on websites — smaller than all alternatives
- Performance-critical sites: WOFF2’s smaller size directly improves Largest Contentful Paint (LCP) and Core Web Vitals scores
- Google Fonts: The default delivery format from fonts.google.com since 2016
- Self-hosted fonts: GDPR-compliant font hosting without routing requests to Google servers
- Progressive web apps: Where every kilobyte of initial load matters
Using WOFF2 in CSS
/* Optimal modern font loading */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Variable font (entire weight range in one file) */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
}For maximum compatibility, pair WOFF2 with a WOFF fallback. In practice, WOFF2-only is safe for any site not targeting users on Internet Explorer.
WOFF2 and variable fonts
Variable fonts (OpenType 1.8, 2016) pack the entire weight, width, and slant range of a typeface into a single file. Combined with WOFF2 compression, a single variable font file often replaces 4-8 separate static weight files while being smaller than just two of those files:
| Approach | Files | Total size |
|---|---|---|
| 4 static weights (Regular, Bold, Light, SemiBold) as WOFF2 | 4 | ~280 KB |
| 1 variable font as WOFF2 | 1 | ~120 KB |
This makes variable fonts + WOFF2 the state-of-the-art for web typography performance.
Font subsetting
WOFF2 files can be subset to include only the Unicode characters actually used on your site. For a Latin-only English website, a full-character font might be 120 KB, while a subset containing only Latin characters is 20-30 KB. Tools for subsetting:
- glyphhanger (Node.js) — Automatically subsets fonts by crawling a site
- pyftsubset (part of fonttools, Python) — Fine-grained Unicode range subsetting
- Google Fonts — Automatically subsets based on the
&subset=latinURL parameter
Preloading for performance
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>This tells the browser to start downloading the font file immediately, before it parses the CSS — eliminating the font-delay that causes layout shifts and invisible text periods.