Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does ?#iefix solve web fonts loading in IE6-IE8?

Lots of articles in the web like this : http://www.fontspring.com/blog/fixing-ie9-font-face-problems suggest to add a ?#iefixto the eot url. I was curious to know how is this going to solve the problem. Thanks.

like image 293
vine'th Avatar asked Nov 08 '11 12:11

vine'th


2 Answers

IE8 and the older have a bug in their parsers for the src attribute. So if you include more than 1 font format in the SRC, IE fails to load it and reports a 404 error.
The question mark solves that problem as it fools IE into thinking the rest of the string (other src) is a query string, and therefore loading just the EOT file...
Other browsers will follow the specification and load just their required font type ...
You may wanna read Paul Irish's Bulletproof @font-face syntax to know more about some other of the why's ...

like image 143
Rexy Hoang Avatar answered Nov 06 '22 10:11

Rexy Hoang


You could do anything instead of ?#iefix: The basic objective is to put a ?#somethingafter the first font file in the URL as @Rexyz has already answered.

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#FooAnything') format('embedded-opentype'), /* IE6-IE8 */      url('webfont.woff') format('woff'), /* Modern Browsers */      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } 
like image 20
basarat Avatar answered Nov 06 '22 10:11

basarat