Home/ Questions/Q 436835
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T20:31:04+00:00

I’d like to build a common typography stylesheet with a very small number of

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0