How do I combine @font-face and @media declarations?

Question

I'd like to build a common typography stylesheet with a very small number of selectors. As such, I'd far prefer to use @media sections for the various versions rather than create different files, each with only a few lines of content.

I'd also like to add some @font-face declarations, but I'd prefer not to force mobile users to download the fonts given their limited bandwidth.

Can I put the @font-face declaration within the @media block or do they have to both be top-level? If the latter, how can I tell the mobile browsers they don't need to bother downloading the font?

Answer 1

Can I put the @font-face declaration within the @media block or do they have to both be top-level?

This seems unspecified by the current Working Draft of the CSS3 Fonts module. However, the CSS Validator rejects font-face-inside-media, so it's probably best avoided.

Answer 2

The CSS2 spec suggests something like this.

1. Put your @font-face declarations in a separate CSS file, such as fancyfonts.css.

2. Load fancyfonts.css in your main CSS file, but with a media-target declaration:

   @import url("fancyfonts.css") screen;

3. Specify your fancy font in the font-family attribute.

   body { font-family: 'My Fancy Font', serif; }

Media which don't load the fancyfonts.css will fall back to the other fonts you specify -- in this example, serif.