CSS3 Fonts

CSS3 @font-face Rule

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

With CSS3, web designers can use any font they prefer.

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

The font you choose is described in the new CSS3 version with the @font-face rule.

Your "own" font is defined in the CSS3 @font-face rule.

Browser Support

The numbers in the table indicate the first browser version that supports the property.

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

Firefox, Chrome, Safari, and Opera support .ttf (TrueType Font) and .otf (OpenType Font) font types.

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

Internet Explorer also supports EOT (Embedded OpenType) fonts.

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

Using the Font You Need

In the new @font-face rule, you must first define the font's name (e.g., myFirstFont) and then point to the font file.

| | Tip: Use lowercase letters for the URL, as uppercase letters can cause unexpected results in IE | | --- | --- |

To use the font for HTML elements, refer to the font's name (myFirstFont) via the font-family property:

Example

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

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

Using Bold Text

You must add another @font-face rule that includes bold text:

Example

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

The file "Sansation_Bold.ttf" is another font file that contains the bold characters of the Sansation font.

The browser should render text in the font family "myFirstFont" as bold when this rule is applied.

This way, you can have multiple @font-face rules for the same font.

CSS3 Font Descriptions

The table below lists all font descriptors and their definitions within the @font-face rule: