@font-face being ignored by IE7
Solution 1
It seems there was something else in my css making IE7 behave badly (shocker!)
Thankfully using some magic fairy dust (zoom: 1) solved the issue.
Solution 2
This approach i just did worked with IE7 and IE8. And yep.. font face declaration for IE7 is different, but simpler, compared to the "multiple-browser" way of declaring it. Here's my example. I added the fonts inside the "fonts" folder so you can see some "fonts/.." added in the code.
/* declaration of custom fontfaces */
/* first set of declaration fixes IE < v.9 issue */
@font-face {
font-family:"Open Sans Light";
src:url("fonts/OpenSans-Light.eot?");
}
/* if your browser is one of the latest ones, then it will recognize the code
below and will redeclare the font faces.
Since IE 7 and 8 do not recognize these declarations,
they will just bypass them. */
@font-face {
font-family:"Open Sans Light";
src:url("fonts/OpenSans-Light.eot?") format("eot"),
url("fonts/OpenSans-Light.woff") format("woff"),
url("fonts/OpenSans-Light.ttf") format("truetype"),
url("fonts/OpenSans-Light.svg#OpenSans-Light") format("svg");
font-weight:normal;font-style:normal;
}
Related videos on Youtube
Comments
-
Cristopher Cuevas Moreno almost 2 years
I've created a @font-face css rule and all the font formats using Font Squirrel and works fine on all browsers I have tested so far, but not on IE7. The font seems to not be loaded at all.
You can see the site live at http://grupogamma.socialsnack.com/
The @font-face rules are on http://grupogamma.socialsnack.com/wp-content/themes/gamma/style.css and fonts are on http://grupogamma.socialsnack.com/fonts/
My css snippet as generated by Font Squirrel:
@font-face { font-family: 'UniversCondensedLight'; src: url('/fonts/univers-condensedlight-webfont.eot'); src: url('/fonts/univers-condensedlight-webfont.eot?#iefix') format('eot'), url('/fonts/univers-condensedlight-webfont.woff') format('woff'), url('/fonts/univers-condensedlight-webfont.ttf') format('truetype'), url('/fonts/univers-condensedlight-webfont.svg#webfonteM3WTEhs') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'UniversCondensed'; src: url('/fonts/univers-condensed-webfont.eot'); src: url('/fonts/univers-condensed-webfont.eot?#iefix') format('eot'), url('/fonts/univers-condensed-webfont.woff') format('woff'), url('/fonts/univers-condensed-webfont.ttf') format('truetype'), url('/fonts/univers-condensed-webfont.svg#webfontPDfnu2z9') format('svg'); font-weight: normal; font-style: normal; }
EDIT:
By using Wireshark I was able to verify the font .eot is indeed loaded, and a 200 OK is returned. The content-type is application/vnd.ms-fontobject. So the font is loaded, but just not used / not rendered properly.
-
BoltClock about 13 yearsFont Squirrel caters to that. Look at the code that it generates again.
-
Tieson T. about 13 yearsWell, I seem to have my eyes at home. You're right. Hmm. Those are local paths. Is there anything in place to rewrite calls to the font directory?
-
Tieson T. about 13 yearsOtherwise, your paths should probably start with "/fonts/..."
-
Cristopher Cuevas Moreno about 13 yearsEdited it, I copied the css from font squirrel instead of my modified version. Online it's using the proper path, but still won't work.
-
Tieson T. about 13 yearsJust out of curiosity, does it work if you disable the IE PNG fix script? I found at least one complaint on script's Google Code page complaining that it breaks relative paths.
-
Tieson T. about 13 yearsThis is the link to the complaint: code.google.com/p/ie7-js/issues/detail?id=229
-
random_user_name almost 12 yearsThis answer is incorrect, and has climbed above other more useful answers due to the votes, so I'm sorry to vote it down :(
-
Cristopher Cuevas Moreno over 11 yearsI added it to the elements not using the proper fonts. In my case it was an anchor tag.