What You’ll Learn

The @font-face at-rule lets you load custom font files into your website. Define a family name, point to the font file, then use that name in font-family like any other font.

Introduction

The @font-face at-rule in CSS lets web developers load custom font files on their websites. Without it, you are limited to fonts already installed on the user’s device or generic families like serif and sans-serif.

Definition and Usage

@font-face is not a CSS property — it is an at-rule, like @media or @charset. It registers a font family name and links it to one or more font files. Once registered, you reference that name in the font-family property on any selector.

This is how brand fonts, icon fonts, and downloadable typefaces reach every visitor consistently — regardless of what is installed on their computer or phone.

📝 Syntax

The basic syntax defines a font family name and where to find the font file:

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

After defining the font, apply it with font-family and always include fallback fonts:

body {
  font-family: 'MyFont', system-ui, sans-serif;
}

Common Descriptors

Multiple Formats

List several src entries so older browsers can pick a supported format:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}

When to Use @font-face

Reach for @font-face when you need typography beyond system fonts:

• Brand identity — Match your company’s official typeface on the web.
• Design consistency — Ensure headings and body text look the same on every device.
• Self-hosted fonts — Host font files on your own server instead of relying on a third-party CDN.
• Custom weights — Load only the weights you need (e.g. 400 and 700) to keep file sizes small.
• Icon fonts — Some icon sets are delivered as font files (though SVG icons are often preferred today).

Skip @font-face when system fonts or a service like Google Fonts (via <link>) already meet your needs and you do not need full control over hosting.

Examples Gallery

Practice @font-face with a basic declaration, WOFF2 loading, bold weight variants, and fallback font stacks.

@font-face {
  font-family: 'DemoSerif';
  src: local('Georgia');
}

body {
  font-family: 'DemoSerif', Georgia, serif;
  padding: 1.5rem;
  color: #1e293b;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/lato.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Lato', system-ui, sans-serif;
}

@font-face {
  font-family: 'Lato';
  src: url('lato-400.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Lato';
  src: url('lato-700.woff2') format('woff2');
  font-weight: 700;
}

h1 { font-weight: 700; }
p { font-weight: 400; }

@font-face {
  font-family: 'Lato';
  src: url('lato.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

💬 Usage Tips

• Prefer WOFF2 — Smaller files and excellent browser support for modern sites.
• Use font-display: swap — Avoid invisible text while fonts download.
• Load only what you need — Include just the weights and styles your design uses.
• Quote family names — Use quotes when the name contains spaces: 'Open Sans'.
• Host fonts correctly — Place files in a fonts/ folder and use relative paths in src.

⚠️ Common Pitfalls

• Forgetting fallbacks — Without backup fonts, failed loads can leave text in an unexpected typeface.
• Wrong file paths — A broken url() silently falls back; always verify paths in DevTools Network tab.
• Fake bold — Browsers may stretch a regular file if you skip the bold @font-face block.
• Loading too many weights — Each file adds download time; trim unused variants.
• Confusing with font-family — @font-face registers the font; font-family applies it.

♿ Accessibility

• Readable typefaces — Choose fonts with clear letter shapes for body text.
• Adequate size and line-height — Custom fonts still need comfortable reading settings.
• font-display: swap — Prevents long periods of invisible text (FOIT) that block reading.
• Contrast — Font choice does not replace color contrast requirements.
• Respect user preferences — Some users override fonts in browser settings; fallbacks help.

💡 Best Practices