Making @font-face work in IIS

Recently we switched to using the CSS property @font-face when we rebranded frooly.com (note: nov 2013 - I know longer work for frooly.com, so no idea on the validity of this link) in order to use some classier fonts. This all worked great locally; however when we tried a deployment of it to our test environment which runs Microsofts IIS as its webserver it worked great for us in chrome, firefox, safari, ie8 downwards however it didn’t seem to work in ie9! great …

I did a little bit of research and it seems some browsers (though we’ve only experienced in ie9 didn’t know how to interpret the .otf, .svg and .woff filetypes that some fonts use. The solution to this is pretty simple all you need to do is add MIME types to IIS for those filetypes, i’ll explain how to do it below, the example will use IIS Version 6, but its similar in most versions.

First go to your website in IIS and right click, properties. Now go to the tab called “HTTP Headers”

Now click the button labelled “MIME Types…” from the resulting dialog click “New…” you should be presented with the following.

In the extension box type “.otf” (without the quote marks) in the MIME type box type “font/otf” (without the quote marks). Repeat the process for the following

  • Extension: .svg MIME type: image/svg+xml
  • Extension: .woff MIME type: application/x-font-woff

When your finished the MIME Types dialog should look like this:

And that’s it! in honesty the one that made it *work* for us in ie9 was the .woff one; but reading up on the subject it seems best practice to do them all.

Edit: 27/10/2011: Updated mime type for .woff so chrome recognizes it without warning to: application/x-font-woff

 

Comments

comments powered by Disqus