@ font-face ignored by IE7

Question

I created the @ font-face css rule and all font formats using Font Squirrel and works fine in all browsers that I still have, but not on IE7. The font does not load at all.

You can see the site in the mode http://grupogamma.socialsnack.com/

The @ font-face rules are at http://grupogamma.socialsnack.com/wp-content/themes/gamma/style.css and the fonts are at http://grupogamma.socialsnack.com/fonts/

My css snippet created 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:

Using Wireshark, I was able to check the font. really loaded, and returns 200 OK. The content type is application / vnd.ms-fontobject. Thus, the font is loaded, but simply not used / not displayed correctly.

Answer 1

It seems that there was something else in my CSS, as a result of IE7 I felt bad (shocker!)

Fortunately, using the fairy fairy dust (zoom: 1) solved the problem.

Answer 2

This approach I just worked with IE7 and IE8. And the expression yep .. font face for IE7 is different, but simpler than the "multiple browser" declaration method. Here is my example. I added fonts to the "fonts" folder so you can see some "fonts / .." added to 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; } 

Answer 3

I am sure this is a simple question: “IE7 don't do this,” as the kids say. The site’s link to @font-face , found at http://reference.sitepoint.com/css/at-fontface , indicates that IE only supports certain font formats via @font-face .

Answer 4

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