@font-face: Definition & Examples

The @font-face at-rule is the CSS mechanism for loading custom fonts — it registers a font family name and associates it with a source file, so that name can be used throughout your stylesheet. Every custom web font, whether self-hosted or served by Google Fonts or Adobe Fonts, arrives in your CSS through @font-face declarations.

Basic syntax:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Multiple weights and styles:

Each weight and style variant requires its own @font-face declaration with the same font-family name. The browser matches font-weight and font-style descriptors to select the correct file:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

Variable fonts — one declaration replaces many:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900; /* Declares a range */
  font-style: normal;
  font-display: swap;
}

The font-display descriptor controls FOUT/FOIT behavior:

Value	Behavior
`auto`	Browser default (usually `block`)
`block`	Invisible text until font loads (FOIT)
`swap`	Fallback immediately, swap when loaded (FOUT)
`fallback`	100ms block, then swap if loads within 3s
`optional`	100ms block, browser decides whether to swap

font-display: swap is recommended for most use cases. optional is appropriate when you'd rather the user see system fonts consistently than experience a layout shift.

Unicode range for conditional loading:

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

The font-family name you declare in @font-face is scoped to your CSS — it doesn't need to match the font's actual name. font-family: 'MyBrandFont' pointing to Inter's files is perfectly valid, though it creates maintenance confusion. By convention, use the font's actual name.