WOFF MIME Type – Free, Online, Private

What .woff is

WOFF 1.0 wraps a TrueType or OpenType font with zlib compression and a header. The first four bytes are wOFF. A flavor field says whether the table data is TrueType or CFF. RFC 8081 registers font/woff and deprecates application/font-woff. WOFF 2 is a different file, magic wOF2, and a different type, font/woff2. A @font-face rule that points at a WOFF 1 file needs this type on the response. The format('woff') hint in CSS is a hint. The header is what a strict browser checks, together with nosniff.

IANA registers font/woff in RFC 8081. application/font-woff is deprecated. The media type is font/woff. Extensions that use it on this page: .woff. 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/woff

What sends font/woff: Send font/woff for a .woff file. If the stylesheet is on another origin, the font response needs Access-Control-Allow-Origin or the browser will download the font and refuse to use it. That CORS failure looks like a bad file and is a header problem. Cache fonts for a long time when the file name is fingerprinted. Do not add a charset. Do not send application/octet-stream. With nosniff, the browser will not guess that an octet-stream body is a font. The file on disk is still .woff. Once the response exists, a client trusts font/woff, not the filename. Prefer WOFF 2 for new sites. Keep a WOFF 1 file only if you still have a client that cannot decompress brotli tables. Serve them as two URLs with two types, and list both in @font-face with format hints. One URL that switches types needs Vary and is harder to reason about.

Content-Type for .woff

Send font/woff 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/woff

nginx, Apache, and Express

These snippets map .woff to font/woff. 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 .woff 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/woff                   woff;

ApacheAddType font/woff .woff

Expressimport express from "express";

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

Pitfalls for font/woff

Pitfalls that show up for font/woff, and not for a neighboring type with a similar extension: The deprecated application/font-woff value is still in old mime.types files. Update it to font/woff. A second bug is a WOFF 2 file renamed to .woff and served as font/woff. The magic will be wOF2 and the decoder fails. A third is a missing CORS header on a CDN. A fourth is a font that is actually an HTML error page because the path fell through to a SPA. The @font-face failure in the console names the type. Read it before you re-export the font.

• font/woff is the type. application/font-woff is deprecated by RFC 8081.
• wOFF is WOFF 1. wOF2 is WOFF 2 and must be font/woff2.
• Cross-origin fonts need CORS. Same-origin fonts do not. The type is the same either way.
• A TTF served as font/woff will fail the magic check. Serve font/ttf for .ttf.