Embedding Web Fonts - Beginning CSS3 - page 81

Figure 5-5. Firefox 14 doubles the italic even when the correct face is used
What appears to be happening in Firefox is that it applies the correct font, but also synthesizes the italic,
resulting in double italic. This is clearly a bug that will hopefully be eliminated in a later version.
Using Different Names with Descriptors
The alternative way of using @font-face is to create a family of fonts by using the same value for font-family in
each rule and describing the font's characteristics with font-weight and font-style .
The values for the font-weight and font-style descriptors are the same as for the similarly named
properties described in Chapter 4 . The default for both is normal , so you need to include the descriptor in an
@font-face rule only if you want to use a different value.
The styles in same_name.css look like this:
@font-face {
font-family: 'Aurulent Sans';
src: url('fonts/AurulentSans-Regular-webfont.eot');
src: url('fonts/AurulentSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/AurulentSans-Regular-webfont.woff') format('woff'),
url('fonts/AurulentSans-Regular-webfont.ttf') format('truetype'),
url('fonts/AurulentSans-Regular-webfont.svg') format('svg');
}
@font-face {
font-family: 'Aurulent Sans';
src: url('fonts/AurulentSans-Bold-webfont.eot');
src: url('fonts/AurulentSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/AurulentSans-Bold-webfont.woff') format('woff'),
url('fonts/AurulentSans-Bold-webfont.ttf') format('truetype'),
url('fonts/AurulentSans-Bold-webfont.svg') format('svg');
font-weight: bold;
}
@font-face {
font-family: 'Aurulent Sans';
src: url('fonts/AurulentSans-Italic-webfont.eot');
src: url('fonts/AurulentSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/AurulentSans-Italic-webfont.woff') format('woff'),
url('fonts/AurulentSans-Italic-webfont.ttf') format('truetype'),
url('fonts/AurulentSans-Italic-webfont.svg') format('svg');
font-style: italic;
}