References

Beginner-friendly references for web development, with live, editable examples.

The CSS @font-face at-rule

At-rule CSS All modern browsers Updated
Quick answer

The CSS @font-face at-rule registers a custom font from a file, giving it a name you then use in font-family. Set the family name, the src (a woff2 file), and descriptors like font-weight and font-display. Adding font-display: swap shows fallback text immediately so content is not invisible while the font loads.

Overview

@font-face is how you bring a custom font to the web. You declare a font, point it at a file, and give it a name; from then on that name works anywhere in font-family just like a system font.

The essentials are the font-family name you are inventing, the src with a url() to the font file and its format(), and a couple of descriptors that tell the browser what this file represents — its font-weight and font-style. Use woff2; it is the modern, well-compressed format every current browser supports.

The descriptor not to skip is font-display: swap. Without it, browsers may hide text entirely while the font downloads (a "flash of invisible text"); swap shows the fallback immediately and swaps in your font when it arrives, so content stays readable. Declare one @font-face per weight and style you actually use — or reach for a single variable font that covers a whole range in one file.

Syntax

@font-face {
  font-family: "My Font";
  src: url("myfont.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "My Font", system-ui, sans-serif;
}

Best practices

  • Use the woff2 format — it is the smallest and is supported everywhere current.
  • Always set font-display: swap so text is visible immediately, with the custom font swapping in when ready.
  • Declare only the weights and styles you actually use; each file is a download.
  • Preload critical fonts with <link rel="preload">, and consider a variable font to cover many weights from one file.

Accessibility

The main accessibility concern with web fonts is not the typeface but the loading behavior. Without font-display: swap, a slow font can leave text invisible for seconds — a real barrier on poor connections. swap keeps the content readable throughout the load. Beyond that, pick fonts with clear, distinct letterforms for body text, which helps readers with dyslexia and low vision.

Frequently asked questions

How do I use a custom font in CSS?
Register it with @font-face (set font-family, src and font-display), then use that family name in your font-family stacks.
What is font-display: swap?
A descriptor that shows fallback text immediately and swaps in the custom font once it loads, preventing the invisible-text flash on slow connections.
What font format should I use?
woff2. It has the best compression and is supported by every current browser, so a single woff2 file is usually all you need.
How do I load a Google Font without @font-face?
Link their stylesheet in your HTML — it contains the @font-face rules for you. Self-hosting with your own @font-face gives you more control and avoids a third-party request.
@container @import