Abakada: Back to Basics > Language References > CSS Properties > At-Rules > @fontFace

---

Specifies a custom font to display text.

@font-face {
   font-family: fontFamilyName;
   src: local( ), url( ) [ format( ) tech( ) ];

   [ ... optional descriptors ... ]

}

Parameter	Description	Valid Values
font-family	Required. Specifies a name that will be used as the font face value for font properties.	font-family name
src	Required. Specifies references to font resources including hints about the font format and technology.	local( ), url( ) format( ) tech( )
ascent-override	Defines the ascent metric for the font.
descent-override	Defines the descent metric for the font.
font-display	Determines how a font face is displayed.
font-style	Accepts font-style values to specify a range that is supported by a font face.	font style: oblique 20deg 50deg;
font-weight	Accepts font-weight values to specify a range that is supported by a font face.	font-weight: 100 400;
font-feature-settings	Allows control over advanced typographic features in OpenType fonts.
font-variation-settings	Allows low-level control over OpenType or TrueType font variations.
line-gap-override	Defines the line gap metric for the font.
size-adjust	Defines a multiplier for glyph outlines and metrics associated with this font.
unicode-range	The range of Unicode code points to be used from the font.

The @font-face at-rule allows for linking to fonts that are automatically fetched and activated when needed.

This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on a given platform.

The font can be loaded from either a remote server or a locally-installed font on the user’s own computer.

In its simplest form, @font-face is specified with just two descriptors: the font family name, and the location of the font resource.

For example, to use a downloadable font called Gentium:

@font-face {
   font-family: Gentium;
   src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: Gentium, serif; }

Browsers will download Gentium and use it when rendering text within paragraph elements. If, for some reason, the site serving the font is unavailable, the default serif font will be used.

In addition, @font-face may be specified with a set of font descriptors described above, that define the style characteristics of an individual face.

NOTE: This section is currently under major reconstruction. Please bear with whatever inconvenience you may encounter; we hope to complete the job at the soonest possible time.

External reference: CSS Fonts Module Level 4