A potentially confusing aspect of embedding web fonts is that the font-family property in a @font-face rule identifies only a single font, not the whole family with its bold, italic, and other versions, such as expanded or condensed. If you want the other versions of the same family, you need to create separate @font-face rules for each one. You can either give each font face a different name, or you can reuse the same name and specify its characteristics using extra descriptors (see examples below).

The @font-face rules assign different names to the regular and bold versions of the font. The body selector applies the regular font to all text, and the bold class uses the bold font.

Example

The @font-face rules applied for multiple boldness and browser support:

 

@font-face {

       font-family: 'AurulentSans Regular';

       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: 'AurulentSans Bold';

       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');

}

 

body {

       font-family: 'AurulentSans Regular', sans-serif;

}

 

.bold {

       font-family: 'AurulentSans Bold', sans-serif;

}

 

›› go to examples ››