Font MIME Types — WOFF, WOFF2, TTF, OTF

Web Font MIME Types

Serving fonts with the correct MIME type is essential for browser rendering, CORS compliance, and HTTP/2 prioritization.

Official Font MIME Types (RFC 8081)

MIME Type	Extension	Format	Recommended
font/woff2	.woff2	WOFF 2.0	Yes (best compression)
font/woff	.woff	WOFF 1.0	Fallback
font/ttf	.ttf	TrueType	Legacy fallback
font/otf	.otf	OpenType	Legacy fallback
application/vnd.ms-fontobject	.eot	EOT	IE only (deprecated)

Why WOFF2 First

WOFF2 uses Brotli compression and achieves 30–50% smaller file sizes compared to WOFF 1.0. All modern browsers support it.

CSS @font-face

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.woff") format("woff"),
       url("myfont.ttf") format("truetype");
  font-display: swap;
}

Server Configuration

Many servers default to application/octet-stream for font files. Add explicit types:

# Nginx
types {
    font/woff2 woff2;
    font/woff  woff;
    font/ttf   ttf;
    font/otf   otf;
}

CORS for Fonts

Fonts loaded cross-origin require CORS headers:

Access-Control-Allow-Origin: *

Without this, browsers block the font and fall back to a system font.

Performance Tips

1. Use font-display: swap to avoid invisible text
2. Subset fonts to include only needed characters
3. Preload critical fonts with <link rel="preload">
4. Self-host rather than using Google Fonts for privacy and performance