Back to MIME Types

font/woff2 WOFF2 Flagship

Identifies WOFF2 web fonts — the modern, most compressed format for delivering custom fonts via CSS @font-face.

What it's for

font/woff2 identifies WOFF2 (Web Open Font Format 2) files — the current standard format for delivering custom web fonts via CSS @font-face, offering meaningfully better compression than its predecessor WOFF (and much better than raw TTF/OTF font files), which directly translates to faster page loads for sites using custom typography. It's the format you should reach for by default today when self-hosting web fonts, with older formats serving mainly as fallbacks for legacy browser support.

Format & syntax

Content-Type: font/woff2

Referenced in CSS via @font-face:

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

No parameters on the Content-Type itself. Note that font/woff2 is the current correct IANA-registered type; older setups sometimes still reference the historically used application/font-woff2 or application/octet-stream, which technically still work in most browsers but aren't the currently correct standard type.

How it's used in practice

  • Self-hosted custom web fonts — the primary use case: any site using a custom typeface not relying on a third-party font-hosting service serves WOFF2 files (often alongside WOFF as a fallback) via @font-face declarations.
  • Font subsetting for performance — web font optimization commonly involves subsetting (including only the specific characters/glyphs actually used on a site) combined with WOFF2's compression, significantly reducing font file size compared to shipping a full, unsubsetted font family.
  • Icon fonts — some icon systems (though SVG-based icons have become more common) still deliver icon sets as a custom WOFF2 font where each icon is mapped to a character glyph.
  • Variable fonts — modern variable font technology (a single font file supporting a range of weights/styles via CSS variation settings, rather than separate files per weight) is commonly delivered as WOFF2 for its compression benefits combined with variable font flexibility.

Common mistakes & gotchas

  • Serving fonts with the wrong Content-Type from custom servers/CDNs — similar to other asset types, self-hosted font files need the correct MIME type explicitly configured on many servers, since font/woff2 isn't always included in default MIME type mappings on older server software, causing fonts to fail to load in some browsers despite the file being valid.
  • Not providing a fallback for very old browsers — while WOFF2 support is extremely broad among modern browsers, sites needing to support genuinely old/legacy browsers sometimes still include a WOFF fallback via multiple src entries in the @font-face rule.
  • CORS issues when loading fonts cross-origin — web fonts loaded from a different origin (a separate CDN domain, for example) require correct CORS headers on the font files, or browsers will refuse to load them — a common "font not loading" issue that's actually a CORS misconfiguration rather than a MIME type problem.
  • Not subsetting fonts, shipping unnecessarily large files — including a full font family's entire character set (including scripts/characters never actually used on the site) when only a small subset is needed wastes significant bandwidth; font subsetting tools can dramatically reduce file size for sites using only a limited character range.

Comparison & FAQ

Type Purpose Key difference from font/woff2
font/woff The predecessor web font format Less efficient compression than WOFF2; mainly relevant now as a legacy fallback
font/ttf / font/otf Desktop-oriented font formats Much larger uncompressed file sizes; not optimized specifically for web delivery the way WOFF/WOFF2 are

Why isn't my custom web font loading even though the file exists?

Check two common culprits: the server might not be sending the correct font/woff2 Content-Type (common on misconfigured or older servers), or if loading from a different origin/CDN, missing CORS headers on the font file will cause browsers to silently refuse to load it.

Do I still need to include WOFF as a fallback alongside WOFF2?

WOFF2 support is extremely broad among current browsers, so for most modern-browser-targeting projects it's not strictly necessary — but sites with a real need to support very old browsers sometimes still include it as an additional fallback.

What's the benefit of font subsetting?

Including only the specific characters/glyphs your site actually uses (rather than a font's entire character set, which may include scripts or symbols never displayed) significantly reduces font file size, directly improving page load performance for text-heavy sites using custom typography.

Is font/woff2 the same as application/font-woff2?

They refer to the same underlying WOFF2 format, but font/woff2 is the current, correct IANA-registered MIME type; application/font-woff2 was an older, non-standard convention some tools/documentation used before the dedicated font/* top-level type was established.