Best Practices for Serving Webfonts to IE9

Our @font-face syntax has been out in the wild for a few months now. It has performed beyond our expectations…except in certain instances of IE9. And here is how to solve them.

Fix IE9 on the Server Side (IIS)

Microsoft’s IIS server will refuse to send resources that it does not have a MIME type for. The syntax we developed forces IE9 to take the WOFF over the EOT, but if it is served on IIS, it will fail. This is because IE9 requests the WOFF file, but since WOFF is not a defined MIME type in IIS, a 404 Not Found error is returned. To solve this, you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your IIS installation.

Fix IE9 on the CSS side

Even easier perhaps, is to tweak our syntax so that IE9 loads the EOT file instead. You merely need to change format(‘eot’) to format(‘embedded-opentype’). This will cause IE9 to load the EOT file instead of the WOFF. IIS knows about EOT files by default so it will work.

Further IE CSS Fix

In some rare cases, IE will fail because the @font-face declaration has too many characters. This can be solved in most instances by adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a bit of extra room.

Update 4/29/11: I now wonder if this has to do with certain Apache servers. Apache returns a 403 error until the ‘#’ is added. Some research indicates that the mod_security module may be to blame. Would love any insight into this.

Don’t Minify your @font-face declaration

Lastly, IE will fail to load the fonts if the @font-face declaration has had all the linefeeds/returns stripped out. Some developers do this to compress their CSS, but it will choke the CSS processor in IE.This was based on anecdotal evidence and may be incorrect. Any confirmation one way or the other would be appreciated.

Our Latest Recommendation

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}