The @Font-Face Rule

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property. You can specify the font you want with the CSS3 @font-face rule. You must first define a name for the font (e.g. myFirstFont), and then point to the font file:

HTML file: Displayed by browser:
<style>
@font-face {
    font-family: myFirstFont;
    src: url(fonts/sansation_light.woff);
}
div {
    font-family: myFirstFont;
}
</style>
<body>
<div>
With CSS3, websites can finally 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.

Good habit Tip: Always use lowercase letters for the font's URL. Uppercase letters can give unexpected results in IE.
Back button Table of Contents Next button