8.9.1. CSS3 @ font-face Rule ¶

With previous versions of CSS, web designers had to use fonts that were already installed on the user’s computer.

With CSS3, a web designer can use any font he or she likes.

When you find the font file you want to use, simply include the font file inthe website and it will be automatically downloaded to the users who need it.

The font you selected is in the new CSS3 the version has information about @font-face rule description.

Your “own” font is in CSS3 @font-face defined in the rules.

8.9.2. Browser support ¶

The number in the table represents the first browser version number that supports the property.

Internet Explorer 9 font, Firefox, Chrome, Safari, and Opera support WOFF (Web Open Font Format) fonts.

Firefox, Chrome, Safari, and Opera support .ttf (True Type font) and .otf (OpenType) font type).

Chrome, Safari and Opera also support SVG fonts / folding.

Internet Explorer also supports EOT (Embedded OpenType) fonts.

Note: Internet Explorer 8 and earlier versions do not support the new @font-face rules.

8.9.3. Use the font you need ¶

In the new @font-face in the rule, you must first define the name of the font (such as myFirstFont), and then point to the font file.

Tip: please use lowercase letters in URL. Uppercase letters can produce unexpected results in IE.

To use fonts for HTML elements, use the font-family property to reference the name of the font (myFirstFont):

Example

<style>
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div
{
    font-family:myFirstFont;
}
</style>

8.9.4. Use bold text ¶

You must add another one that contains bold text @font-face rules:

Example

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}

This file “Sansation_Bold.ttf” is another font file that contains Sansation the bold type of the font.

Browsers should appear in bold when using the font family “myFirstFont” of this text.

So you can have many of the same fonts. @font-face the rules.

8.9.5. CSS3 font description ¶

The following table lists all the font descriptions and the @font-face rule definition: