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
Thank you for this helpful information!
Chrome outputs this when using @font-face: Resource interpreted as font but transferred with MIME type application/octet-stream. Using your information as well as this resource I have found this works added to the .htaccess for font MIME types:
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
Sorry, I forgot the link to the other helpful resource that helped me with this MIME thing:
http://annevankesteren.nl/2008/08/font-mime-types
How about new .WOFF format?
AddType "application/x-woff" .woff
chrome just added support for not bitching when you use "application/x-woff" for woff.. last week. FYI
@Paul Irish Thanks!
I will provide another post with updated information — including WOFF — soon.
when i add the mime type to htaccess file, it locks my website and i get the 501 error? any suggestions? Im really trying to add the ttf mime type because safari does yt recognize it fully and thus the font isnt as smooth as it should be.