@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
Explorer Edge Chrome Firefox Opera Safari
41213.5103.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤3718410.12Yes

Last updated by CSSPortal on: 1st December 2019