Aug 9, 2009
Correct MIME Type for CSS Web Fonts
Support for CSS3 Fonts via @font-face is now available in Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari, with support in Opera and Google Chrome due soon.
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