Current time: 12-08-2019, 12:34 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS @font-face and IE 7 & 8 404 errors
08-13-2010, 05:40 PM
Post: #1
CSS @font-face and IE 7 & 8 404 errors
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.
Find all posts by this user
Quote this message in a reply
08-18-2010, 12:11 AM
Post: #2
RE: CSS @font-face and IE 7 & 8 404 errors
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
Find all posts by this user
Quote this message in a reply
08-18-2010, 02:04 PM (This post was last modified: 08-18-2010 02:34 PM by Chris_Olbekson.)
Post: #3
RE: CSS @font-face and IE 7 & 8 404 errors
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");
}
Find all posts by this user
Quote this message in a reply
08-21-2010, 10:03 PM
Post: #4
RE: CSS @font-face and IE 7 & 8 404 errors
Yep, you gotta keep an eye on new developments & insight for @font-face.
Follow @paul_irish or @fontsquirrel on Twitter.
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 2 Guest(s)