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

Question

Refresh . It looks like I got into a correlation that was not really the cause of the problem. The issue was actually an unrelated issue in how the CSS files were deployed. See my answer below for more details.

I have @ font-face working well in WebKit (Safari and Chrome) and Opera, but not in Firefox 3.5 or IE 8.

Following the recommendations of Google and others, I serve all static assets, including CSS, from a separate domain from my main site. If I serve everything from one domain, it works fine in all browsers (note: this means that CSS syntax answers are useless. I already have everything that works and works fine. About cross-domain issues).

If I serve CSS and font files from my static asset domain and the static asset server sets the appropriate access control header (Access-Control-Allow-Origin), which should work, it works everywhere except FF 3.5 and IE.

What do I need to do to make this work?

Answer 1

The best answer I have discovered so far, in the hope that it will help someone else:

As far as I can tell, the key issue is whether the CSS file (and not the font file) is uploaded cross-domain. If I load a CSS file with @ font-face declarations from my static asset domain, I won’t do anything to make the fonts work in FF or IE, regardless of the access control headers. If I download a CSS file from the same domain as the page, or just transfer the @ font-face declarations to the style block in the page header, then it works in all browsers (I can even load cross-domain font files as long as I have a set access control headers).

To summarize: AFAICT, FF 3.5, and IE 8 will abandon the @ font-face name of the declarations in the cross-domain CSS file, no matter what.

I would love to fix this if someone knows better and can indicate what else I can do wrong.

In fact, I was wrong. It turns out that the CSS compressor that we used to deploy the assets for servicing from a dedicated domain wrapped the entire piece of CSS using "@media screen {...}". I carefully compared @ font-face rules to make sure the compressor didn't mess with them, but never checked the beginning and end of the CSS file to catch this packaging. When I switched to the same service domain, this packaging did not happen.

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

Sigh.

Answer 2

I would suggest looking at this IEBlog post that describes how you embed fonts in IE. No, this does not match the CSS3 method, and no, you have no other way to do this in IE using @ font-face.

It may be worth noting that Microsoft introduced the EOT approach to W3C in the process of standardization, and W3C expressed interest in this process of action.

Answer 3

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

Unfortunately, I was very disappointed with the quality of the text from most of the fonts I wanted to try. I could not decide if some fonts were not smoothed or not, but the results were not satisfactory, and I still use image replacement.