CSS3 @font-face Rule

Example

Specify a font named "myFirstFont", and specify the url where it can be found:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot') format("opentype"); /* IE */
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The @font-face rule is supported in all mojor browsers.

Internet Explorer only support fonts of type .eot

Firefox, Chrome, Safari, and Opera support fonts of type .ttf and .otf


Definition and Usage

With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts.

Make a font-face rule by giving the font a name:

Include a font file somewhere on your server, and refer to it with CSS:

If the font file is located at a different domain, use a full URL instead:

Now the font is ready to use, below is an example of how to use it for all div elements:

div
{
font-family: myFirstFont;
}


Syntax

@font-face
{
font-properties
}

Font descriptor Values Description
font-family name Required. Defines the name of the font.
url URL Required. Defines the url where the font should be downloaded from
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Defines how the font should be stretched. Default value is "normal"
font-style normal
italic
oblique
Optional. Defines how the font should be styled. Default value is "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Optional. Defines the boldness of the font. Default value is "normal"
unicode-range unicode-range Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF"