@font-face CSS At-Rule

Description

The @font-face CSS at-rule allows you to define and use your own custom fonts, thus allowing you to extend the limited set of standard system fonts that are installed by default on a computer, and that browsers can access and use.

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');

}