Using Bold Text

The file "sansation_bold.woff" is another font file, which contains the bold characters for the Sansation font. Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold. Adding another @font-face rule leads to descriptors for the bold text. You can have many @font-face rules for the same font:

HTML file: Displayed by browser:
<style>
@font-face {
    font-family: myFirstFont;
    src: url(fonts/sansation_light.woff);
}
@font-face {
    font-family: myFirstFont;
    src: url(fonts/sansation_bold.woff);
    font-weight: bold;
}
div {
    font-family: myFirstFont;
}
</style>
<body>
<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>
</body>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.

Note: Internet Explorer 8 and earlier, do not support the @font-face rule.

Back button Table of Contents Next button