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:
@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.