CSS3 Fonts

« Previous Chapter Next Chapter »


CSS3 @font-face Rule

Before CSS3, web designers had to use fonts that were already installed on the user's computer.

With CSS3, web designers can use whatever font he/she likes.

When you have found/bought the font you wish to use, simply include the font file in the web site, and it will be downloaded automatically to the user when needed.

You will have to describe your selected font with the new CSS3 @font-face rule.

In the @font-face rule you define a name for the font, and the URL to the font file:

Example

@font-face
{
font-family:myFirstFont;
src:url(Sansation_Light.ttf);
}


Browser Support

Property Browser Support
@font-face

Internet Explorer does not yet support the @font-face rule.

Firefox, Chrome, Safari, and Opera support the @font-face rule.

Using The New Font

To use the new font, add "myFirstFont" as the value of the font-family property:

Example

div
{
font-family:myFirstFont;
}


Using Bold Text

You must add another @font-face rule containing descriptors for bold text:

Example

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

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

Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.

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

CSS3 Font Descriptors

The Below table lists all the font descriptors that can be defined inside the @font-face rule:

Descriptor Values Description
font-family name Required. Defines a name for the font
url URL Required. Defines the URL to the font file
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 is "normal"
font-style normal
italic
oblique
Optional. Defines how the font should be styled. Default is "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Optional. Defines the boldness of the font. Default is "normal"
unicode-range unicode-range Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"


« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!