CSS @font-face Rule

❮ Previous Reference Next ❯

Example

@font-face {
  font-family: myFont;
  src: url("ShadowsIntoLight-Regular.ttf");
}

.example {
font-family: myFont;
}
Try this code ❯

Meaning

The @font-face is used to associate a font name to be used in a style sheet with some downloadable font.

A font-family property is used within the rule to name the font and a src property is associated with an external font name.



Standard Syntax

@font-face {
  font-properties
}


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Property Values

The following table describes the values of this property.

Value Description
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 based on whether and when it is downloaded and ready to use.
font-family Specifies a name that will be used as the font face value for font properties.
font-stretch A font-stretch value. Accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%;
font-style A font-style value. Accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg;
font-weight A font-weight value. Accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400;

Note: The font-variant descriptor was removed from the specification in 2018. The font-variant value property is supported, but there is no descriptor equivalent.
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, by specifying the four letter axis names of the features to vary, along with their variation values.
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. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.
src Specifies references to font resources including hints about the font format and technology. It is required for the @font-face rule to be valid.
unicode-range The range of Unicode code points to be used from the font.
❮ Previous Reference Next ❯