CODEWITHSUNDEEP
cssfontsmobile
James A. Rosen
James A. Rosen

Reputation: 65242

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?

Upvotes: 3

Views: 484

Answers (2)

a paid nerd
a paid nerd

Reputation: 31512

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.

Upvotes: 3

bobince
bobince

Reputation: 536369

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.

Upvotes: 1

Related Questions