What is MIME type "font/woff2"?
A MIME type is a string that tells browsers and other tools how to handle a particular kind of file.
font/woff2 is a MIME type that signals a font file in the Web Open Font Format 2.0.It stores typeface data in a compressed format. This leads to faster downloads and lower bandwidth use.
Web browsers use it to render custom typography on web pages.
The format is optimized for modern web delivery and is supported by most browsers. The file generally has the WOFF2 extension.
- Main use: Delivering web fonts efficiently.
- Reduces load times with advanced compression.
- Improves website performance and design.
- Ensures consistency in typography across devices.
Associated file extensions
Usage Examples
HTTP Header
When serving content with this MIME type, set the Content-Type header:
Content-Type: font/woff2
HTML
In HTML, you can specify the MIME type in various elements:
<a href="file.dat" type="font/woff2">Download file</a>
Server-side (Node.js)
Setting the Content-Type header in Node.js:
const http = require('http');
http.createServer((req, res) => {
res.setHeader('Content-Type', 'font/woff2');
res.end('Content here');
}).listen(3000);
Associated file extensions
FAQs
What is the correct MIME type for WOFF2 files?
The official IANA-registered MIME type for WOFF2 files is font/woff2. While you may occasionally see legacy references to application/font-woff2 or application/x-font-woff2, these are deprecated. You should always configure your server to use font/woff2 to ensure compliance with modern standards like RFC 8081.
How does font/woff2 differ from font/woff?
The primary difference is compression efficiency. WOFF2 uses the Brotli compression algorithm, which typically reduces file sizes by 30% to 50% compared to the zlib compression used in standard font/woff. This results in faster page load times and reduced bandwidth consumption.
How do I use a WOFF2 font in CSS?
You should use the @font-face rule and list the WOFF2 format first so modern browsers prioritize the smaller file. For example:
css
@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2'),
url('font.woff') format('woff');
}
This ensures that browsers supporting WOFF2 download the optimized version, while older browsers fall back to WOFF.
Which browsers support the font/woff2 MIME type?
WOFF2 is supported by all modern browsers, including Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge. However, it is not supported by Internet Explorer. If you need to support IE11 or older, you must include a fallback to the standard WOFF or EOT formats.
How do I configure Apache to serve WOFF2 files?
To serve files with the .woff2 extension correctly in Apache, add the following line to your .htaccess file or main configuration:
AddType font/woff2 .woff2
This ensures the server sends the correct Content-Type header to the browser.
Why is my WOFF2 font not loading due to CORS errors?
Browsers restrict cross-origin loading of web fonts for security reasons. If your font files are hosted on a different domain or CDN than your website, your server must send the Access-Control-Allow-Origin header. Without this header, the browser will block the request even if the MIME type is correct.
Is application/font-woff2 a valid MIME type?
No, application/font-woff2 is considered a legacy or incorrect type. The W3C and IANA standardized the type as top-level font media type. You should update your server configuration to use font/woff2 to prevent warnings in browser consoles and ensure future compatibility.
How do I add WOFF2 support to IIS?
In Internet Information Services (IIS), you must explicitly add the MIME type if it is missing. Open the MIME Types feature for your site, click Add, set the file name extension to .woff2, and set the MIME type to font/woff2.
General FAQ
What is a MIME type?
A MIME (Multipurpose Internet Mail Extensions) type is a standard that indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838.
MIME types are important because they help browsers and servers understand how to process a file. When a browser receives a file from a server, it uses the MIME type to determine how to display or handle the content, whether it's an image to display, a PDF to open in a viewer, or a video to play.
MIME types consist of a type and a subtype, separated by a slash (e.g., text/html, image/jpeg, application/pdf). Some MIME types also include optional parameters.
How do I find the MIME type for a file?
You can check the file extension or use a file identification tool such as file --mime-type on the command line. Many programming languages also provide libraries to detect MIME types.
Why are multiple MIME types listed for one extension?
Different applications and historical conventions may use alternative MIME identifiers for the same kind of file. Showing them all helps ensure compatibility across systems.