Web Fonts 51
For example, if you’re going to use an italic style in your page, you must
be sure to also define an italic style in @font-face. Here’s an illustration of
how not to define an italic weight:
@font-face {
font-family: 'Gentium Basic';
src: url('GenBasR.woff') format('woff');
}
h1 {
font-family: 'Gentium Basic', sans-serif;
font-style: italic;
}
You can see that my @font-face rule uses the regular face of the Gentium
Basic font, but the h1 element has an italic style declared on it. You can see
the effect in Figure 5-3, which compares this method with the correctly
defined method from the previous section.
Figure 5-3: Comparing an artificial italic (top) with a true italic font face (bottom)
As you can see, the two examples are quite different. The first is the
selected Gentium Basic font slanted to fake an italic style (using the first
code example); the characters are larger, slightly distorted, and spaced
inconsistently. The second is the true italic font face (using the correct
method), which uses characters designed specifically for this purpose.
The same applies for all the different font faces: bold, italic, bold italic,
small caps, condensed, and so on.
A “Bulletproof” @font-face Syntax
I explained at the beginning of this chapter that the @font-face rule
has been around for quite a while, having been implemented in Internet
Explorer as far back as 1997. This means that it carries with it some unfor-
tunate legacy issues in older versions of IE. In addition, some historical
issues around font formats can cause compatibility problems in older ver-
sions of other browsers.
Because of these issues, you need a workaround to ensure that @font-
face works correctly across all browsers. Before I introduce the fully cross-
browser “bulletproof ” @font-face syntax, let me discuss briefly some of the
problems it addresses.
