CSS @font-face Rule

Definition and Usage

By using the @font-face rule, web designers no longer need to use any "web-safe" fonts.

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

Tip:The URL of the font should be in lowercase letters. Uppercase letters may produce unexpected results in IE!

To use the font with HTML elements, refer to the font name (myFirstFont) through the font-family property:

div {
  font-family: myFirstFont;
}

See also:

CSS Tutorial:CSS Web Fonts

Example

Specify a font named "myFirstFont" and define the URL where it can be found:

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

Try it yourself

More TIY examples can be found below the page.

CSS syntax

@font-face {
  font-properties
}
Font descriptor Value Description
font-family name Mandatory. Defines the font name.
src URL Mandatory. Defines the URL of the downloaded font.
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. The default value is "normal".
font-style
  • normal
  • italic
  • oblique
 Optional. Defines the font style. The default value is "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Optional. Defines the weight of the font. The default value is "normal".
unicode-range unicode-range Optional. Defines the Unicode character range supported by the font. The default value is "U+0-10FFFF".

More examples

Example

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

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

Try it yourself

The file "sansation_bold.woff" is another font file that contains the bold characters of the Sansation font.

When a paragraph of text with the font family "myFirstFont" should be displayed in bold, the browser will use it.

In this way, you can set multiple @font-face rules for the same font.

Browser support

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

The numbers in the table indicate the first browser version that fully supports the font format.

Font format
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Not supported Not supported Not supported 3.2 Not supported
EOT 6.0 Not supported Not supported Not supported Not supported

* Edge and IE: Font format is only valid when set to "installable".

* Firefox: Disabled by default, but can be enabled (the flag needs to be set to "true" to use WOFF2).