Article Update: August 16, 2013
Article Update: October 1, 2012
After some exhaustive research, I managed to find the best server settings for serving web fonts. This article replicates my comment in reply to this question on the Stack Exchange forum.
There are a number of font formats that one can set MIME types for, on both Apache and IIS servers. I’ve traditionally had luck with the following:
svg as "image/svg+xml" ttf as "application/x-font-ttf" or "application/x-font-truetype" otf as "application/x-font-opentype" woff as "application/font-woff" (per my August 16, 2013 update below) eot as "application/vnd.ms-fontobject"
According to the Internet Engineering Task Force who maintain the initial document regarding Multipurpose Internet Mail Extensions (MIME types) here: http://tools.ietf.org/html/rfc2045#section-5 … it says in specifics:
“It is expected that additions to the larger set of
supported types can generally be accomplished by the creation of new
subtypes of these initial types. In the future, more top-level types
may be defined only by a standards-track extension to this standard.
If another top-level type is to be used for any reason, it must be
given a name starting with “X-” to indicate its non-standard status
and to avoid a potential conflict with a future official name.“
As it were, and over time, additional MIME types get added as standards are created and accepted, therefor we see examples of vendor specific MIME types such as vnd.ms-fontobject and the like.
Update October 1, 2012: I’ve been in touch with some of the people at Monotype and Extensis who watch the W3C www-font listserve. Vladimir Levantovsky from Monotype mentioned to me that the media type “application/font-woff” has been discussed and approved by the W3C WebFonts WG, and as such is now the part of the WOFF spec. However, to the best of his knowledge, it has not yet been registered with IANA. Thomas Phinney from Extensis mentioned as well that he was recently discussing this among the engineering staff at Extensis the other day, and the conclusion was that having a real, dedicated MIME type for WOFF and fonts in general would be a good thing, from their point of view.
Update August 16, 2013: On January 3, 2013 the WOFF MIME Type was formally registered as application/font-woff with IANA. Consequently, Webkit has been updated and browsers that incorporate this Webkit update (e.g., Chrome and Safari) will likely be showing an error that displays something like: “Resource interpreted as Font but transferred with MIME type application/x-font-woff: /location/of/font.woff” in your Developer Tools Code Inspector. To fix this, you need to change the media type on your server to “application/font-woff”.
Since the warnings are only annoying I would recommend switching to the approved MIME type right away. In an ideal world, the warnings will resolve themselves in time.
With that said, we may see an entirely new set of protocols for servers serving web-fonts, which may include things like security, management and new architectures for font storage on the server side. Stay tuned!
5 responses to “Proper MIME types for Embedded @font-face Fonts”
[…] add this quick reference to the proper way to setup mime-types for @font-face here. Thanks go to Mike Kormendy for his blog post about these, and his answer on Stack Overflow to a similar question that led me to his blog […]
[…] To remedy this, I logged-on to cPanel and made sure that the MIME types for all of the font files were up-to-date, using Mike Kormendy’s approach: […]
MIME types are very important … specially if you are going to use css embedded fonts on your website … thanks for these tips 🙂
Your article is marvelous. Just a little remarks. I think a mistake was invited in your code here :
eof as “application/vnd.ms-fontobject”
I think it is this instead
eot as “application/vnd.ms-fontobject”
Thanks Yoann, you’re absolutely correct on that. I’ve fixed that typo… And I am drafting some changes to incorporate woff2 to the mime list. Stay tuned.