CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES

CSS @font-face rule

Topic: CSS3 Properties ReferencePrev|Next

Description

The @font-face rule is used to associate a font name to be used in a style sheet with some downloadable font. A font-family descriptor is used within the rule to name the font and a src descriptor is associated with an external font name.


Syntax

The syntax of this at-rule is given with:

@font-face font-description

The @font-face rule contains one or more property declarations, like those in a regular CSS, which are called font descriptors. You can specify up to 24 different properties, however explaining them all is beyond the scope of this reference — To learn more about please visit W3C CSS Fonts Module page.

The general form of an @font-face at-rule is:

@font-face { font-family: fontname; src: url(fontfile path); }

Later, the font can be used as a name within properties like font-family and font, though you should specify other font names as a fallback in case downloadable font is not supported or the font fails to load for some reason.

The example below shows the @font-face property in action.

  • @font-face {
  •     font-family: "OpenSans";
  •     src: url("../fonts/OpenSans-Regular.eot");
  •     src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  • }
  • body {
  •     font-family: "OpenSans", Arial, sans-serif;
  •     font-size: 1.2em;
  • }

Note: By using the @font-face rule you don't need to depend on the limited number of fonts users have installed on their computers.

It is also possible to set selection of a particular downloadable font when a particular font characteristic like bold or italic is set, by adding the corresponding rule to the @font-face.

  • @font-face {
  •     font-family: "OpenSans";
  •     src: url("../fonts/OpenSans-Regular.eot");
  •     src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  • }
  • @font-face {
  •     font-family: "OpenSansBold";
  •     src: url("../fonts/OpenSans-Bold.eot");
  •     src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
  • }
  • h1 {
  •     font-family: "OpenSansBold", Arial, sans-serif;    /* Specify the OpenSans bold font */
  • }
  • p {
  •     font-family: "OpenSans", Arial, sans-serif;
  • }

Parameters

Parameters have the following meanings:

Parameter Value Description
Required — The following parameters are required.
font-family font-family Defines the font name that will be used as a font-family value for font properties.
src url Specifies the location of a font file to use.
Optional — The following parameters are optional.
font-style font-style A valid font-style property value.
font-weight font-weight A valid font-weight property value (except for the relative values, bolder and lighter).

Browser Compatibility

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

Browsers Icon

Basic Support—

  • Firefox 3.5+
  • Google Chrome 4+
  • Internet Explorer 4+
  • Apple Safari 3.1+
  • Opera 10+

Note: The support for particular font technologies varies significantly across the browsers. Internet Explorer supports .eot and .wof type fonts, while Firefox, Chrome, Safari, and Opera supports .woff, .ttf and .otf type fonts.


Further Reading

See tutorial on: CSS Fonts.

Your Feedback:

We would love to hear from you, please drop us a line.