In CSS1 there was only a simple way of specifying the font to be used for displaying the text of an element. CSS2 introduced the idea of WebFonts, which allows for

Why is it all so complicated?

You might be wondering why not just let the developer specify a font using its name, and then specify the characteristics (weight, size and so on). Of course we can do that, but unfortunately, there isn't any simple way of specifying fonts by name. More importantly, what happens when the specified font isn't available? The font specification scheme of CSS2 is more flexible, allowing for a much closer match to the desired font even when it isn't available.

How does it work?

There are two aspects to the use of fonts in CSS2. Specification by the developer, and Selection by the browser.

To aid in the browser's selection of a font, CSS2 introduces the @font-face rule, which allows developers to create a font description. The @font-face rule is part of the style sheet, and helps the browser to match a font at its disposal to the one desired by the developer.

An @font-face rule comprises a list of one or more font descriptors. These can specify something as simple as the font name and its url, through to a list of the widths of its glyphs (graphical representation of the characters).

A simple example of an @font-face rule in operation, taken from the CSS2 specification is

<html>

<head>

@font-face
{font-family:"Robson Celtic";

src:url("http://site/fonts/rob-celt")}

h1
{font-family:"Robson Celtic", serif;}

</style>

</head>

<body>

<h1>This heading is displayed using Robson Celtic</h1>

</body>

</html>

The @font-face rule

As you might guess from the above, the @font-face rule's syntax is the keyword @font-face, followed by a set of descriptors, all contained within curly braces, and separated by a semicolon. From the above example

@font-face {

font-family: "Robson Celtic";

src: url("http://site/fonts/rob-celt")

}

The font descriptors themselves are very similar to the properties of a normal statement, in fact many of them are almost the same. In essence, a descriptor has a name, followed by a colon, then a comma separated list of values. Let's take a look at a more complicated example, then discuss the different types of descriptor in detail.

@font-face {

font-family: serif;

src: local("Palatino"),

local("Times New Roman"),

local("New York"),

local("Utopia"),

url("http://somewhere/free/font");

font-weight: 100, 200, 300, 400, 500;

font-style: normal;

font-variant: normal;

font-size: all

}

This rule suggests that when a serif font is called for, especially when normally styled, and weighted, and at any font size, the browser should use local fonts called Palatino, Times New Roman, etc., and failing that, download the remote font specified by the url.

Just what names for descriptors can there be? You'll have already noted the familiar font-family, font-weight, font-style, font-size, and font-variant. In fact all of the font properties we've seen can be used to help specify a font using @font-face rules. The slight difference between font descriptors in @font-face rules and font properties in normal statements is that the descriptors can take a list of values, where generally, font properties can't.

In addition, there are a large number of other descriptor names. These are specialized, and require some understanding of underlying typographical concepts. As such, it's a bit beyond this guide's level of competence. I recommend you take a look at the CSS2 Font Specification, which has a good introduction to many of the important ideas, and full coverage of the different types of descriptor.

font specification

Why is it all so complicated?

How does it work?

The @font-face rule

Browser support

next: generated content