@font-face CSS At-Rule

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS @font-face at-rule allows you to specify custom fonts to be used on a web page. This is useful because it gives you more control over the appearance of your text, and it allows you to use fonts that may not be installed on the user's computer.

To use the @font-face at-rule, you must first define a name for the font and then specify the location of the font file. The font file can be located on the same server as your web page, or it can be located on a different server.

Once you have defined the font, you can use it in your CSS like any other font. For example, you can use it to set the font family of a heading, paragraph, or other element.

Syntax

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}

Values

font-displayDetermines how a font face is displayed based on whether and when it is downloaded and ready to use.
font-familySpecifies a name that will be used as the font face value for font properties.
font-stretchA font-stretch value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%;
font-styleA font-style value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg;
font-weightA font-weight value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400;
font-variantA font-variant value.
font-feature-settingsAllows control over advanced typographic features in OpenType fonts.
font-variation-settingsAllows 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.
srcSpecifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the users computer.
unicode-rangeThe range of Unicode code points to be used from the font.

Example

@font-face {

  font-family: 'Open Sans';

  src: url('opensans.eot');

  src: url('opensans.eot?#iefix') format('embedded-opentype'),

       url('opensans.woff') format('woff'),

       url('opensans.ttf')  format('truetype'),

       url('opensans.svg#svgFontName') format('svg');

}