WOFF2

WOFF2 (Web Open Font Format 2.0) is the most efficient font format available for web delivery today. It's supported by all modern browsers and should be your default choice when self-hosting fonts. Compared to its predecessor WOFF, WOFF2 achieves roughly 30% better compression on average — a significant saving when fonts are often one of the heavier resources on a page.

The compression improvement comes from WOFF2's use of the Brotli algorithm (the same algorithm used in HTTP/2 content compression), along with a preprocessing step that transforms the font's glyph data into a format that compresses more efficiently. The result is that a font that might be 200KB as a TTF file could be 60-80KB as WOFF2.

Using WOFF2 in CSS:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Modern simplified syntax (single format is sufficient):

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
}

You no longer need to include WOFF or TTF fallbacks in your @font-face declarations. Browser support for WOFF2 covers all browsers that would run your modern CSS anyway — if a browser can handle CSS Grid, it can handle WOFF2.

Preloading WOFF2 for performance:

<link
  rel="preload"
  href="/fonts/inter-regular.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

The crossorigin attribute is required even for same-origin fonts — this is a quirk of how browsers handle font requests.

For variable fonts, WOFF2 supports the same glyph format as OpenType variable fonts, so a single WOFF2 file can replace an entire font family. Roboto Flex distributed as WOFF2, for example, replaces dozens of individual weight and width variants in a package that's still smaller than serving several static files.

When converting fonts to WOFF2, tools like fonttools (Python) or woff2 (Google's C++ encoder) produce the best compression. The pyftsubset tool from fonttools also lets you subset and convert in a single step, which is the most efficient workflow for production font pipelines.