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-facedeclarations. - 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/woff2isn'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
srcentries in the@font-facerule. - 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.