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

Web Fonts 49

To illustrate a real-world example, I’ll apply the Chunk font (available to

download for free from http://www.theleagueofmoveabletype.com/fonts/4-chunk/)

to an h1 element using @font-face. Here’s the code I’ll use in my style sheet:

@font-face {

 font-family: ChunkFive;

src: local('ChunkFive'), url('ChunkFive.woff') xformat('woff');

}

y h1.webfont { font-family: ChunkFive, sans-serif; }

The first step is to name my font; I’ve chosen ChunkFive () because

I can remember it easily, but I could use any name. Next I provide values

to the src property: local () uses the true name of the font, ChunkFive, to

check if it’s available on my system. Following that I enter a relative path to

the font file I want to use (), and finally, I assign an argument of woff

to the format value (x). I explain the WOFF format in “Font Formats” on

page 52.

noTe You can usually find a font’s true name by using a font management application or
by right-clicking the font file to view the font information.

In the last line (y), I include my newly defined font in the font stack

using the name value I defined inside the @font-face rule and apply it to all

h1 elements with a class of webfont. To see how that displays, here’s a quick

comparison using the following markup:

<h1>Alas, poor Yorick!</h1>

<h1 class="webfont">Alas, poor Yorick!</h1>

You can see the output in Figure 5-1.

Figure 5-1: The ChunkFive font (the bottom row), called using the @font-face rule,

compared to the page default font (the top row)

Defining Different Faces

The @font-face syntax you’ve seen so far in this chapter is pretty straight-

forward, but it only defines one font face—that is, a single permutation

of weight, slope, and so on. If you want to use a different face, such as a