About WOFF2 font files
The web font format to use today: Brotli-compressed, around 30% smaller than WOFF, and supported everywhere. Fonts loaded from another origin with @font-face need an Access-Control-Allow-Origin header, or the browser silently falls back to a system font. Serve them with a long cache lifetime and a hashed file name.
Other types seen for these files:
application/font-woff2
. Accept them when reading uploads, but send font/woff2 yourself.
File signature
WOFF2 files start with 77 4F 46 32 ("wOF2"). The extension and the type a browser reports for an upload both
come from the file name, so check these bytes on the server before trusting a file.
Serve .woff2 with the right Content-Type
Content-Type: font/woff2
font/woff2 woff2;
AddType font/woff2 .woff2
@woff2 path *.woff2
header @woff2 Content-Type "font/woff2"
curl -sI https://example.com/file.woff2 | grep -i '^content-type'
# Content-Type: font/woff2
Set the type in code
res.set('Content-Type', 'font/woff2');
// Or make the browser download it:
res.attachment('file.woff2');
import mimetypes
mimetypes.add_type('font/woff2', '.woff2') # if your system doesn't know it
mimetypes.guess_type('file.woff2')[0] # 'font/woff2'
mime.AddExtensionType(".woff2", "font/woff2")
w.Header().Set("Content-Type", "font/woff2")
Accept .woff2 uploads
<input type="file" accept=".woff2,font/woff2">
The accept attribute only filters the file picker; users can still choose another file. Listing the
extension as well as the type matters, because operating systems don’t always report the type you expect.
Related types
More fonts
.otf . Look up any extension or type with the MIME type lookup.
Sources
Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.
Frequently asked questions
What is the MIME type for .woff2 files?
font/woff2. You may also see application/font-woff2, which is older or unofficial; send font/woff2. The full header is "Content-Type: font/woff2".
Why does my server send the wrong Content-Type for .woff2?
Web servers pick the type from the file extension using a table (mime.types in nginx and Apache). If .woff2 is missing from that table, they send a default such as application/octet-stream or text/plain. Add the mapping as shown on this page, then check the response with "curl -sI".
How can I check that a file really is WOFF2?
Look at the first bytes rather than the extension or the type the browser reports, which both come from the file name. WOFF2 files start with 77 4F 46 32 ("wOF2"). The MIME type lookup on this site reads them for you when you drop a file on it.