Search code examples
internet-explorerfont-facewebfonts

odd 404s issue with IE and webfonts

I have the following @font-face code provided to me by webfonts.fonts.com.

@font-face {
  font-family: "Arial W01 Regular";
  src: url("https://example.com/fonts/6efc8731-df51-47d4-94f6-d20bbfa83f13.eot?iefix");
  src: url("https://example.com/fonts/34904d9f-aa74-4e54-96b2-c893c64d4649.woff") format("woff"), url("https://example.com/fonts/4c8849d4-261c-445a-b013-663d9b3e42c6.ttf") format("truetype"), url("https://example.com/fonts/821da903-3a46-4ec9-a459-afb6776bee53.svg#821da903-3a46-4ec9-a459-afb6776bee53") format("svg"); }

It seems to work fine on all browsers, but I'm getting very odd 404s come through from IE clients - IE6, IE7, and IE8. Instead of properly picking one of the web fonts, they seem to concatenate the entire CSS instruction into a string and request the whole thing:

xxx.xxx.xxx.xxx example.com - [16/Nov/2011:09:23:30 -0500] "GET /fonts/4c81d16c-907a-43df-8e68-27da8939ce09.woff%22)%20format(%22woff%22),%20url(%22https://example.com/fonts/84ee8818-41db-4b62-8639-d3cfbf2751e8.ttf%22)%20format(%22truetype%22),%20url(%22https://example.com/fonts/d25a458a-cbcf-47ab-a30d-977747bbea34.svg HTTP/1.1" 404 2720 "https://example.com/" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; GTB7.1; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; MSN 9.0;MSN 9.1;MSN 9.6;MSN 10.0;MSN 10.2; MSNbVZ02; MSNmen-us; MSNcOTH)"

Oddly enough, IE still sees the webfonts, so it's not affecting the client-side functionality, just dirtying up my error logs. How can I fix this, or should I just ignore it?

Solution

  • Unfortunately, that is how Internet Explorer does it. The only known workaround is to simply apply a hash (#) after the font and never look at your log files again.

    @font-face {
  font-family: "Arial W01 Regular";
  src: url("https://example.com/fonts/...eot#");
  ...
}

    For an entertaining talk about the subject, see Jake Archibald's talk at DIBI Conference 2011, Font-Face - Good vs Legal