Search code examples
cssfontsfont-face

@font-face being ignored by IE7

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.

Solution

  • 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.