CSS3 Fonts | Rookie Tutorial

---

CSS3 @font-face Rule

With previous versions of CSS, web designers were limited to using only fonts already installed on the user's computer.

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

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

The font you choose is described by the @font-face rule in the new CSS3 specification.

Your "own" fonts are defined within the CSS3 @font-face rule.

---

Browser Support

The numbers in the table indicate the first browser version 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 (TrueType fonts) and .otf (OpenType fonts).

Chrome, Safari, and Opera also support SVG fonts.

Internet Explorer also supports EOT (Embedded OpenType) fonts.

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

---

Using Your Desired Font

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

Tip: Use lowercase letters in font URLs; uppercase letters may produce unexpected results in IE.

To apply the font to an HTML element, reference the font name (myFirstFont) using the font-family property:

Example

@font-face{font-family:myFirstFont; src:url(sansation _ light.woff); }div{font-family:myFirstFont; }

Try it yourself »

---

Using Bold Text

You must add another @font-face rule containing the bold version of the font:

Example

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

Try it yourself »

The file "Sansation_Bold.ttf" is another font file containing the bold version of the Sansation font.

When browsers use the font family "myFirstFont" for this text, it should be displayed in bold.

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

---

CSS3 Font Descriptors

The following table lists all font descriptors defined within the @font-face rule:

Descriptor	Values	Description
font-family	name	Required. Specifies the name of the font.
src	URL	Required. Defines the URL of 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 the style of the font. Default is "normal".
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the weight (boldness) of the font. Default is "normal".
unicode-range	unicode-range	Optional. Defines the UNICODE character range supported by the font. Default is "U+0-10FFFF".