@font-face nested within @media does not work in Firefox 3.5 and IE8

Answer 1

The best answer I've discovered so far, in hopes that it helps someone else:

As far as I can tell, the key issue is whether the CSS file (not the font file) is loaded cross-domain. If I load the CSS file with the @font-face declarations from my static assets domain, nothing I do will make the fonts work in FF or IE, regardless of the access control headers. If I load the CSS file from the same domain as the page, or I just move my @font-face declarations into a style block in the page head, then it works in all browsers (I can even load the font files cross-domain as long as I have the access control header set).

To summarize: AFAICT, FF 3.5 and IE 8 will refuse to honor @font-face declarations in a cross-domain-loaded CSS file, no matter what.

I would love to be corrected on this if anyone knows better and can point out what else I might be doing wrong.

Indeed, I was wrong. It turns out the CSS-compressor we were using for deploying assets to be served from the dedicated domain was wrapping the entire chunk of CSS with "@media screen { ... }". I carefully compared the @font-face rules to be sure the compressor didn't mess with them, but never checked the very beginning and end of the CSS file to catch that wrapping. When I switched to serving same-domain, that wrapping didn't happen.

As it turns out, IE and Firefox do not honor @font-face declarations wrapped inside @media: Safari, Chrome and Opera do.

Sigh.

Answer 2

This link helped me a lot: http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master

Unfortunately, I was sorely disappointed with the quality of the text from most of the fonts I wanted to try. I couldn't decide if some fonts weren't anti-aliasable or not but the results weren't satisfying and I still use image replacement.

Answer 3

I would suggest looking at this IEBlog post, which describes how you do font embedding on IE. No, that doesn't match the CSS3 way, and no, you don't have any other way to do it in IE using @font-face.

It might be worth noting that Microsoft submitted the EOT approach to the W3C in a move to get it standardized, and W3C has expressed interest in that course of action.