CSS3 Fonts

CSS3 @font-face rules

With previous versions of CSS, web designers had to use fonts that were already installed on users' computers.

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

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

The font of your choice is described in the new CSS3 version with regard to the @font-face rule.

Your "own" fonts are defined in CSS3 @font-face rules.

Browser support

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

Property
@font-face	4.0	9.0	3.5	3.2	10.0

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

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

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

Internet Explorer also supports EOT (Embedded OpenType) fonts.

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

Use the font you need

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

	Tip: Please use lowercase letters for URLs, uppercase letters will produce unexpected results in IE

To use a font for an HTML element, refer to the font's name (myFirstFont) through the font-family attribute:

Example

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

 Try It! 

Use bold text

You have to add another @font-face rule with bold text:

Example

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

Try It! 

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

Browsers should render this text bold when using the font family "myFirstFont".

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

CSS3 font description

The following table lists all font descriptions and @font-face rule definitions inside: