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

}

Browser Support

Desktop
4	12	1	3.5	10	3.1
Tablets / Mobile
≤37	18	4	10.1	2	Yes