@font-face not working in IE8/9, but works in IE7

Question

I am using the following CSS code for a custom font, based on Paul Irish's bulletproof @font-face syntax:

@font-face {
    font-family: 'TradeGothic';
    src: url('tradegothiclt.eot');
    src: local('☺'),  
        url('tradegothiclt.otf') format('otf'),
        url('tradegothiclt.ttf') format('truetype');
}

For some reason, this works perfectly in Firefox, Chrome, and IE7, but does not work in IE 8/9. Any ideas why this might be the case? I've tried other font-face methods and I get the same result every time. I don't know if it's relevant, but this is being done through a Wordpress install.

Answer 1

Move the @font-face rule out of the @media rule.

By general CSS syntax , at-rules may appear only at the top level in a style sheet, not as nested inside another at-rule. IE 9 seems to enforce this, and you can also check this using the W3C CSS Validator (which gives an obscure error message “parse error” when at-rules are nested).