WOFF2 MIME Type – Free, Online, Private

What .woff2 is

WOFF 2 is the font package browsers should get. The first four bytes are wOF2. Tables are compressed with brotli, which is why the file is smaller than WOFF 1 and much smaller than a raw TTF. RFC 8081 registers font/woff2. There is no application/font-woff2 you should send. The CSS hint is format('woff2'). A browser that does not understand WOFF 2 skips that source and tries the next one. It does not guess a different Content-Type. Your server still has to send font/woff2 on the URL the hint selected.

IANA registers font/woff2 in RFC 8081. The media type is font/woff2. Extensions that use it on this page: .woff2. A client compares the type, not the filename, once the response has arrived. The filename still matters on disk and in Content-Disposition, which is why a wrong extension and a wrong header are two different bugs.

What sends font/woff2

What sends font/woff2: Send font/woff2 for a .woff2 file. Add CORS headers when the font is requested cross-origin, the same rule as WOFF 1. Fingerprint the file name and cache it. A font that changes under a stable URL will look like a flash of unstyled text until every cache expires. Do not add a charset. Do not send Content-Encoding: br in addition to WOFF 2's own brotli and then forget the header. Double compression is usually wasted, and a missing Content-Encoding corrupts the wOF2 magic. The file on disk is still .woff2. Once the response exists, a client trusts font/woff2, not the filename. You do not need a WOFF 1 fallback for current browsers. If you still ship one, give it font/woff and its own URL. Do not configure a single .woff2 URL to sometimes return WOFF 1 bytes. The magic and the type would disagree for half your clients.

Content-Type for .woff2

Send font/woff2 and do not add a charset parameter. The body is binary. A charset tells a text decoder to reinterpret bytes that are not text, which corrupts a download and does not help a browser sniff the format.

Content-TypeContent-Type: font/woff2

nginx, Apache, and Express

These snippets map .woff2 to font/woff2. nginx reads the types block when it picks a type from the URL's extension. A location that sets default_type, or an application that sets the header itself, overrides that map. Apache AddType applies in the directory context where you put it. The Express static example writes the header for files ending in .woff2 so a stale mime database in the framework cannot disagree with the type on this page.

nginx# /etc/nginx/mime.types, inside the types { } block
font/woff2                  woff2;

ApacheAddType font/woff2 .woff2

Expressimport express from "express";

const app = express();
app.use(express.static("public", {
  setHeaders(res, filePath) {
    if (filePath.endsWith(".woff2")) {
      res.setHeader("Content-Type", "font/woff2");
    }
  },
}));

Pitfalls for font/woff2

Pitfalls that show up for font/woff2, and not for a neighboring type with a similar extension: An old mime.types without a woff2 line serves application/octet-stream. With X-Content-Type-Options: nosniff the browser refuses the font. Add the line from this page. A second bug is a TTF or a WOFF 1 uploaded with a .woff2 name. Check for wOF2. A third is a CDN that strips CORS headers on font responses only, because a cache key ignored the Origin. Vary: Origin, or a single allowed origin you actually mean, fixes it. A fourth is listing woff2 first in CSS and serving the file from a host that 301s to HTML.

• font/woff2 is the registered type. application/font-woff2 is not.
• The magic is wOF2, not wOFF. Those are different files.
• Brotli inside WOFF 2 is not Content-Encoding: br. Leave the type as font/woff2.
• A variable font is still font/woff2. The axes are in the font, not in the media type.