Login
 

F Blog Home

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 */
	}

16 Comments

Francesco

Very interesting, thank you!

But are you sure about minification? I'm using it and I can see the right fonts on IE9 (and everywhere else) with no problems.

April 21, 2011 at 11:05 AM

Ethan Dunham

@Francesco - Have you tried in IE7/8? Is your @font-face code all by itself, or with your other code?

April 21, 2011 at 11:06 AM

Francesco

I tried it, and it works (in real IE7/8 and in compability modes too). It's together with the rest of my minified css, it looks like this:

...other-stuff;}@font-face{font-family:webfont;src:url('/css/fonts/webfont.eot');src:url('/css/fonts/webfont.eot?#iefix') format('eot'),url('/css/fonts/webfont.woff') format('woff'),url('/css/fonts/webfont.ttf') format('truetype');font-weight:normal;font-style:normal;}more-stuff{...

Maybe the problem is there only under certain circumstances? (I don't include the SVG, could it be that?)

April 21, 2011 at 11:15 AM

Ethan Dunham

@Francesco - I won't be afraid to admit I'm wrong here... Admittedly this recommendation is based on anecdotal evidence.

April 21, 2011 at 11:23 AM

Francesco

I'll try and make some more tests, to see if maybe there's something else in my site that accidentally... fixes it!

April 21, 2011 at 11:26 AM

Francesco

Okay, I made a test page, with just the font-face declaration (and a couple more, just to have more of a "real" page).

http://www.dimensionedelta.net/block/tests/font-test.html

It seems to work perfectly in every IE (I tested IE6, 7, 8 and 9 natively and all the compability modes).

I even removed the spaces before "format", even though my minifier doesn't... it still works.

It's good news, I guess... it would have been a little problematic to minimize everything but the font-face declaration! :-)

April 22, 2011 at 04:21 AM

Zoe Gillenwater

My fonts are not loading in IE 9 and Opera 11.01, but they are loading in all other browsers I've tested (IE 8, IE 7, FF, Chrome, Safari). I'm not running IIS, and I already have the ?#iefix syntax. I tried listing the format as both eot and embedded-opentype, and neither version worked. Any other ideas?

April 26, 2011 at 08:53 AM

Francesco

@Zoe, any test page you can share?

April 26, 2011 at 04:38 PM

Ryan

Minified CSS for me with font-face seems to be working fine in IE6+.

What minifier are you using maybe it strips something out that breaks the deceleration? I've minified mine with YUI.

April 26, 2011 at 10:58 PM

Tim Wright

Good notes, I had no idea about issues compressing the @font-face declaration

April 27, 2011 at 08:15 AM

Ethan Dunham

It looks like I may be mistaken about the minification. Several problem cases involved flattened CSS, but the issue may have been unrelated. I have updated the post accordingly. Please keep us updated if you do or do not have problems with compressed CSS.

April 27, 2011 at 10:59 AM

Pradeep

Thanks heaps!!

April 28, 2011 at 07:24 AM

Vince

The first, i'm sorry about my english, it realy not good :).

I have question:

Have you try with some fonts as: 'GOTHICI.ttf','GOTHICI.eot'. When i
try with font 'GOTHICI.ttf','GOTHICI.eot' in IE 9, it not successful. And i reviwed debug in IE9, it show 'CSS3111: @font-face encountered unknown error.
GOTHICB.eot'. I don't know why. Can you help me?

May 9, 2011 at 11:52 PM

Jonatas Miguel

I was doing some tests with fonts loaded via @font-face and noticed that the fonts loaded this was would not print in Opera, after fiddling around with the code a bit, I discovered that the problem was the "#iefix" in the "src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */" line was causing the problem, in fact, the problem still persists if you have just "iefix" as well. Version of Opera I am using: 11.10 Build 2092 OSX 10.6.7.

Also, does anyone else have problems printing @font-face fonts in Firefox? I just can't seem to get them to print...

May 12, 2011 at 09:28 AM

Jonatas Miguel

Arg, never mind, it seems to be working in Opera now. Disregard my previous post.

May 12, 2011 at 09:56 AM

Paulo Fernandes

Hello, with the method above, when applying 'font-weight:bold', it doesn't render as expected in Chrome (there's no change from 'normal'), in the other browsers it works fine.

May 12, 2011 at 10:31 AM

Submit a Comment

Comments are closed.