HTML Dog
Skip to navigation

At-Rules: @import, @media, and @font-face

At-rules are clever, powerful little huggers that encapsulate a bunch of CSS rules and apply them to something specific. They can be used to import other CSS files, apply CSS to a particular media, or embed funkysexy uncommon fonts.

Each at-rule starts with an apetail, or an “at sign”, if you want to be boring about it (“@”).

Importing

Let’s start with the simple @import rule. This is used to bolt another stylesheet onto your existing one.


@import url(morestyles.css);

This can be used if a site requires long, complex stylesheets that might be easier to manage if they are broken down into smaller files.

@import rules must be placed at the top of a stylesheet, before any other rules.

Targeting media types

@media can be used to apply styles to a specific media, such as print.


@media print {
    body {
        font-size: 10pt;
        font-family: times, serif;
    }

    #navigation {
        display: none;
    }
}

Values that follow “@media” can include screen, print, projection, handheld, and all, or a comma-separated list of more than one, such as:


@media screen, projection {
    /* ... */
}

Embedding fonts

@font-face has been around for a long time but was nigh-on useless for much of its life. CSS 3 has polished it up and it is now widely used as a technique for embedding fonts in a web page so that a typeface can be used even if it isn’t sitting on the user’s computer. So you no longer need to rely on “web safe” fonts such as Arial or Verdana. Exciting times.

Jumping in at the deep end…


@font-face {
    font-family: "font of all knowledge";
    src: url(fontofallknowledge.woff);
}

What this does is create a font named “font of all knowledge” using the font-family descriptor and links the font file “fontofallknowledge.woff” to that name using the src descriptor. “font of all knowledge” can then be used in a standard font rule, such as:


p { font-family: "font of all knowledge", arial, sans-serif; }

The font will be downloaded (in this case from the same directory as the CSS file) and applied to paragraphs. If the browser is too decrepit to deal with sparkly new font-faces, it will simply revert to the next, standard, font in the list. Magic!

You can also look for a number of fonts to apply to the rule with a comma-separated list. Checking to see if a font is already present on a user’s computer, removing the need to download it, can also be accomplished by replacing “url” in the src value with “local”.

And because a font file might contain a whole host of weights or styles, you might also want to specify which one you’re interested in. So the @font-face rule could end up looking something like this:


@font-face {
    font-family: "font of all knowledge";
    src: local("font of all knowledge"), local(fontofallknowledge), url(fontofallknowledge.woff);
    font-weight: 400;
    font-style: normal;
}