WebPagetest Forums
CSS @font-face and IE 7 & 8 404 errors - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Discuss Test Results (/forumdisplay.php?fid=4)
+--- Thread: CSS @font-face and IE 7 & 8 404 errors (/showthread.php?tid=335)



CSS @font-face and IE 7 & 8 404 errors - Chris_Olbekson - 08-13-2010 05:40 PM

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.


RE: CSS @font-face and IE 7 & 8 404 errors - aaronpeters - 08-18-2010 12:11 AM

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


RE: CSS @font-face and IE 7 & 8 404 errors - Chris_Olbekson - 08-18-2010 02:04 PM

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");
}



RE: CSS @font-face and IE 7 & 8 404 errors - aaronpeters - 08-21-2010 10:03 PM

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