“Resource interpreted as Font but transferred with MIME type ...“

Some browsers, like Google Chrome, will show this warning when a font is downloaded from a web server that sets an unexpected MIME type for fonts.

For many font types, there is a solution!

Update the configuration for your web server with the following MIME type per font file extension:

• .ttf — font/truetype
• .otf — font/opentype
• .eot — application/vnd.ms-fontobject
• .woff — application/x-font-woff

If you are using Apache configuration, you may include the AddType directive for each font type:

AddType application/vnd.ms-fontobject eot
AddType font/opentype otf
AddType font/truetype ttf
AddType application/x-font-woff woff

With a specific MIME type configured per font, and not the generic application/octet-stream MIME type, you should no longer see a warning in your web browser console.

This configuration — while effective for cleaning up your console — does not include the technically correct MIME type for fonts like OTF, TTF, and WOFF. For these font types, an official MIME type has not (yet) been approved. An official type for WOFF — application/font-woff — has been requested.

In the 18 months since then, the state of MIME types for web fonts largely remains the same:

Because there are no defined MIME types for TrueType, OpenType, and WOFF fonts, the MIME type of the file specified is not considered.
— @font-face, Mozilla Developer Network

However, since then web font support in most major browsers has continued to improve. The lack of official MIME types for web fonts is not a major concern, and it has not slowed further adoption of web fonts in most major web browsers. One emerging font format is WOFF.

WOFF

In late 2009, Mozilla debuted the Web Open Font Format (WOFF) specification and soon shipped a working implementation in the first WOFF-capable web browser, Firefox 3.6. The Mozilla Foundation was then joined by Microsoft Corporation and Opera Software ASA in April 2010 as they submitted a specification for the WOFF file format to the newly chartered W3C WebFonts Working Group.

Microsoft debuted support for WOFF in Internet Explorer 9 platform preview 3. Opera added support for WOFF in Opera 11.10. Google Chrome 5.0 added support for WOFF. Curiously still absent among the major web browsers supporting WOFF today is Apple Safari.

With increasing support, more sites are being designed with web fonts. However, many web servers are not providing the correct MIME type for these files.

For the Apache web server, the following configuration in an .htaccess file will provide the correct MIME type for web fonts:

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

The AddType directive for Apache supports multiple file extensions and the values are case-insensitive.

Web fonts are typically one of three file types:

• OpenType (.otf)
• TrueType (.ttf )
• Embedded OpenType (.eot)

For many common file types found on the web, there is a dedicated MIME type defined. That is not the case for some font file types. Both OpenType and TrueType files do not have assigned MIME media types.

There is an assigned MIME type for Embedded OpenType (.eot) files: application/vnd.ms-fontobject

The MIME type application/octet-stream is used is to indicate binary data that does not have a more specific, assigned MIME type. In practice it is often used as the default MIME for binary, non-text data that should be downloaded to a file. See RFC 2046 for more details.

Update (27 February 2011): You may also be interested in the post Web Fonts: No MIME Types, No Problem