Embedding Web Fonts - Beginning CSS3 - page 82

@font-face {
font-family: 'Aurulent Sans';
src: url('fonts/AurulentSans-BoldItalic-webfont.eot');
src: url('fonts/AurulentSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/AurulentSans-BoldItalic-webfont.woff') format('woff'),
url('fonts/AurulentSans-BoldItalic-webfont.ttf') format('truetype'),
url('fonts/AurulentSans-BoldItalic-webfont.svg') format('svg');
font-weight: bold;
font-style: italic;
}
body {
font-family: 'Aurulent Sans' , sans-serif;
}

Each @font-face rule uses 'Aurulent Sans' as the value for font-family , and—with the exception of the
first one—uses font-weight and/or font-style to describe the font's characteristics. The first rule defines the
regular font, so the descriptors default to normal .
The HTML markup in same_name.html is identical to different2.html. Figure 5-6 shows how it's rendered by
Firefox 14.

Figure 5-6. The double italic effect in Firefox is eliminated by building a font family with descriptors

Building a font family like this with descriptors not only simplifies your subsequent CSS and HTML markup,
but it also eliminates the double italic effect in Firefox. So, if you're planning to use web fonts for the main text in
a website, this is the better way to use @font-face . However, if you plan to use web fonts only for special effects
on a limited number of elements, using different names for each font face makes your styles easier to understand.
Neither method is inherently superior to the other.

■ You can also use the font-stretch descriptor in an @font-face rule to specify a condensed or expanded
version of a font. it accepts the following values: normal , ultra-condensed , extra-condensed , condensed ,
semi-condensed , semi-expanded , expanded , extra-expanded , and ultra-expanded .

Note