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

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?

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.

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.