Recently we switched to using the CSS property @font-face when we rebranded frooly.com 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”
- 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:
Edit: 27/10/2011: Updated mime type for .woff so chrome recognizes it without warning to: application/x-font-woff