CSS Web Fonts

Load custom fonts into your pages using Google Fonts and the @font-face rule.

Overview

Web fonts allow you to use any typeface on your web pages, not just the fonts already installed on the user's device. There are two main ways to use web fonts: **Google Fonts** A free font service. You add a `<link>` to Google's CDN in your HTML `<head>`, and the font is available to use in your CSS. This is the simplest approach and requires no font files of your own. **@font-face** A CSS rule that loads a font from a local file or URL. This gives you full control and lets you self-host fonts for privacy, performance, and offline support. When loading web fonts, be mindful of performance. Each font weight and style is a separate file download. Loading 5 font variants can noticeably slow your page. Use only the weights you need, and use `font-display: swap` to show text immediately while the font loads.

Key Points

•Google Fonts: link tag in <head>, then use the font-family name in CSS
•@font-face: define font-family name, src path, and optional weight/style
•font-display: swap shows fallback text while the custom font downloads
•Each font variant (weight, italic) is a separate download minimize them
•WOFF2 is the most compressed and widely supported font format
•Variable fonts can contain all weights in a single file

Examples

Using Google Fonts

<!-- 1. Add in <head> choose specific weights to minimize download -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet">

/* 2. Use in CSS */
body {
  font-family: 'Inter', sans-serif;
}

"preconnect" hints tell the browser to connect to the font server early, speeding up the download.

@font-face for self-hosted fonts

@font-face {
  font-family: 'MyFont';          /* name you use in font-family */
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff')  format('woff'); /* fallback */
  font-weight: 400;
  font-style: normal;
  font-display: swap;              /* show text immediately */
}

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

Loading multiple weights

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

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

Same font-family name, different font-weight the browser picks the right file automatically.

Common Mistakes

Loading many font weights when only 2-3 are used each is a separate HTTP request
Forgetting font-display: swap without it text may be invisible while fonts load
Not providing a fallback in font-family: "Inter", sans-serif without sans-serif, invisible text if font fails

Note

For most projects, 2 font weights (regular + bold) of one family is sufficient. Use the system font stack for body text and load a custom font only for headings if performance matters.

CSS Web Fonts

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does font-display: swap do in a @font-face rule?