jbarker.com / blog

Icon

Correct MIME Type for CSS Web Fonts

Share now:
Facebook Twitter Reddit Delicious Stumbleupon Posterous Tumblr Linkedin Email

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.

Web Browser Logos

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

Share now:
Facebook Twitter Reddit Delicious Stumbleupon Posterous Tumblr Linkedin Email

Category: software

Tagged: , ,

  • http://acepek.com/ acepek

    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

  • http://acepek.com/ acepek

    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

  • Andrej P. Sysoev

    How about new .WOFF format?

  • Amir Mirkus

    AddType "application/x-woff" .woff

  • http://paulirish.com Paul Irish

    chrome just added support for not bitching when you use "application/x-woff" for woff.. last week. FYI

  • http://www.jbarker.com/ jbarker

    @Paul Irish Thanks!

    I will provide another post with updated information — including WOFF — soon.

    • http://twitter.com/Loso_Fresh Low-So

      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.