WebPagetest Forums

Full Version: CSS @font-face and IE 7 & 8 404 errors
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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.
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
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");
}
Yep, you gotta keep an eye on new developments & insight for @font-face.
Follow @paul_irish or @fontsquirrel on Twitter.
Reference URL's