@font-face being ignored by IE7

Question

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.

IE7's developer console has nothing of the sort of "Network", unlike Firebug / Webkit's developer toolbar / Opera's dragonfly. You can check it out: http://www.microsoft.com/en-gb/download/details.aspx?id=18359 — Johnco, Feb 16 '13 at 18:15

score 8 · Accepted Answer · answered May 29 '11 at 21:12

8

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.

answered May 29 '11 at 21:12

Johnco

4,037
4
34
43

I added it to the elements not using the proper fonts. In my case it was an anchor tag. – Johnco Sep 13 '12 at 14:16

score 3 · Answer 2 · answered Feb 27 '13 at 09:33

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; 
           }

score 0 · Answer 3 · answered Jun 11 '12 at 02:20

0

I found that I needed to add the file extension in IIS in the mime type as shown here http://technet.microsoft.com/en-us/library/bb742440.aspx

answered Jun 11 '12 at 02:20

Luke

3,375
2
22
22

score 0 · Answer 4 · answered Apr 07 '11 at 05:58

0

I'm pretty sure it's a simple matter of "IE7 don't do that," as the kids say. Sitepoint's reference on @font-face, found at http://reference.sitepoint.com/css/at-fontface, indicates that IE only supports certain font formats via @font-face.

answered Apr 07 '11 at 05:58

Tieson T.

20,774
6
77
92

1

Font Squirrel caters to that. Look at the code that it generates again. – BoltClock Apr 07 '11 at 06:00
Well, 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. Apr 07 '11 at 06:04
Otherwise, your paths should probably start with "/fonts/..." – Tieson T. Apr 07 '11 at 06:07
Edited 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. – Johnco Apr 07 '11 at 13:53
Just 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. Apr 08 '11 at 21:24
This is the link to the complaint: http://code.google.com/p/ie7-js/issues/detail?id=229 – Tieson T. Apr 08 '11 at 21:27
This answer is incorrect, and has climbed above other more useful answers due to the votes, so I'm sorry to vote it down :( – random_user_name May 03 '12 at 19:07

@font-face being ignored by IE7

4 Answers4

Linked