CSS @font-face and IE 7 & 8 404 errors

[Chris_Olbekson]

Whats the best way to handle embedded hosted fonts? IE requires an .eot font and doesn't know how to handle .woff and .otf so it eventually throws a 404 after the .eot loads.

You can see the issue in my test results:
http://www.webpagetest.org/result/100813_2VR8/

Chrome, Firefox and Safari will load the .woff and skip over the .eot without making a request.

I have been contemplating serving a specific ie style sheet with only the .eot fonts but I hate the idea of browser specific style sheets. I guess I shouldn't be complaining with first load times under 1 sec on WordPress but I am a performance junkie.

[aaronpeters]

Chris,

you should use the Font Squirrel @font-face generator. It's awesome!
These guys are on the ball, closely follow developments (e.g. IE9) and make sure their @font-face code works cross-browser.

For several fonts, they have @font-face kits ready to go.
Start here: http://www.fontsquirrel.com/fontface
Download a kit for a font and open the demo HTML and CSS files to see the working syntax.

Generator is here: http://www.fontsquirrel.com/fontface/generator

[Chris_Olbekson]

I am currently using the fontsquirrel css (bulletproof) method. The problem is that IE makes unnecessary HTTP requests resulting in a 404 as it attempts to parse the rules for the “other browsers.

I went back to fontsquirrel and realized they are now recommending the mo better bulletproof method which uses a smiley face for the local declaration which causes IE to skip the extra http requests. Here is how the preferred method looks:

Code:

@font-face {
  font-family: "MetaBook";
  src: url("http://typefront.com/fonts/xxxxxxxxx.eot");
  src: local("☺"),
       url("http://typefront.com/fonts/xxxxxxx.woff") format("woff"),
       url("http://typefront.com/fonts/xxxxxxx.otf") format("opentype");
}

[aaronpeters]

Yep, you gotta keep an eye on new developments & insight for @font-face.
Follow @paul_irish or @fontsquirrel on Twitter.