@font-face CSS At-Rule

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The @font-face at-rule is the mechanism in CSS that lets authors register and name a font so it can be used in styling just like any native system font. Rather than relying solely on fonts installed on the user’s device, this rule allows a stylesheet to declare a font resource and expose it under a family name that other style rules reference. That separation between declaring a font resource and using it by name gives authors control over typography across different platforms and enables consistent visual design.

Under the hood, declaring a font with @font-face associates a named font family with one or more font resources and metadata describing the font’s characteristics. The browser uses that metadata to select the right face when a particular combination of family, weight, style, and stretch is requested by ordinary font selection. Authors commonly provide multiple declarations for the same family to cover different weights, styles, or subsets of Unicode characters; the user agent then matches the requested style to the best available face declared for that family.

Using @font-face affects loading, rendering, and layout. Because the font file must be fetched before it can be used for text rendering, author decisions (such as splitting fonts by range, providing only the weights needed, or controlling loading behavior) influence page load performance and perceived text stability. There are also interactions with the font loading lifecycle and APIs that let scripts observe or control when a face has loaded, which can be important for preventing flash-of-unstyled or flash-of-invisible-text experiences.

Beyond technical concerns, working with custom fonts declared by @font-face raises practical considerations: choose fonts and delivery strategies that balance aesthetics, file size, and loading time; respect font licensing and embedding restrictions; and test legibility and fallback behavior across languages and rendering environments. Thoughtful use of the at-rule enables rich, consistent typography but requires attention to performance, accessibility, and legal constraints.

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

The following information will show you the current browser support for the CSS at-rule @font-face. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.