Geek Answers Handbook

@ font-face behavior mismatch inside @media query rules (IE9)

The current behavior in Chrome, Firefox, and Safari when it comes to media queries and resources is to not load the resource until you need it; for example, a mobile device with a resolution of 480 pixels does not load images inside the max-device-width: 1000px . Naturally, this is great for storing significant desktop resources from mobile devices.

I am facing inconsistency with this approach when it comes to loading font resources. The web font for all of the browsers listed above will be downloaded below. EXCEPT IE9

 @media screen and (max-device-width: 1000px) { @font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); /* full stack here etc. */ } }

This is annoying because I want to save a large font from the mobile, but IE9 will not load the font if it is not outside the media request.

Is this the right behavior? I cannot find anything about font resources, especially in the specs, so it may be that IE9 is doing it right (although this is not my desired behavior). Can anyone shed some light on this?

+4
source share
3 answers

Here's why: "The at rules inside @media are not valid in CSS2.1 . "
Firefox seems to respect the spec.

+3
source

so why don't you just include the ie9 specific @ font-face declaration in conditional comments? either this or re-declare @ font-face for mobile. I assume that by "mobile" you mean IEMobile? You can also target IEMobile through conditional comments so you can do it anyway.

0
source

Although old, my answer may help other users with the same problem. I wrote an article on how to solve this problem, which can be read here .

Basically, you can use conditional comment plus a JavaScript-based solution because IE10 ignores conditional comments.

0
source

More articles:


All Articles