The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

50 Chapter 5

bolder weight or an italic type, you have to define each font face individu-

ally. To do this, you re-use the same name and add extra descriptors to the

@font-face rule:

@font-face {

 font-family: 'Gentium Basic';

src: url('GenBasR.woff') format('woff');

}

@font-face {

 font-family: 'Gentium Basic';

x font-style: italic;

src: url('yGenBasI.woff') format('woff');

}

h1 { font-family: 'Gentium Basic', sans-serif; }

Here, you can see that the first @font-face rule defines the font name

as Gentium Basic () and gives the URL of the regular font face (). The

second @font-face rule uses the same font name () but adds the font-style

property with the italic value (x), and the URL points at the font’s italic

face (y). The italic style is applied automatically and appropriately, without

your having to define it in the CSS, as in this example markup:

<h1>I knew him, Horatio</h1>

<h1><em>I knew him, Horatio</em></h1>

The second h1 element uses the italic font face defined in the previous

rules (you can see the result in Figure 5-2).

Figure 5-2: Gentium Basic Regular (top) and Italic (bottom) applied using

@font-face

You can define any number of variations of a font with this method by

using different font properties in the @font-face rule: font-weight to set vari-

ous weights, font-variant for small caps faces, and so on.

True vs Artificial Font Faces

One thing to be aware of when you use web fonts is that you must define a

link to an appropriate file for each different font face you wish to use. If you

don’t, browsers will attempt to re-create the face artificially, often with ugly

results.