HTML Web Fonts

Every website has its own personality, and a large part of that personality comes from its typography. Web fonts let you use custom typefaces on your site instead of relying only on the handful of fonts already installed on a visitor's device. When a browser loads your page, it downloads the font file just like it downloads an image, then uses it to render your text. This means a reader in one country and a reader on another continent will see exactly the same typeface, even if neither of them has it installed locally. Web fonts are what let brands keep a consistent look everywhere their site is viewed, no matter what device or operating system opens it.

In this page:

What Are Web Fonts?
Loading a Custom Font with @font-face
Providing Font Formats and Fallbacks
Controlling Font Loading with font-display
Optimizing Web Fonts for Performance

What Are Web Fonts?

Web fonts are typeface files that a browser downloads over the network and applies to text on a page, instead of relying on fonts already installed on the visitor's device. This lets designers use distinctive typography that renders identically for every visitor, anywhere in the world. Google Fonts is the most popular free web font service, used by millions of websites worldwide to serve fast, reliably hosted typefaces like Roboto.

Note: Choose a small number of font weights to keep your page fast, especially for visitors on slower connections.

Warning: Some free font services track visitor requests, so always check a font provider's privacy policy before linking to it.

Example: What Are Web Fonts?

markup

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
<p style="font-family: 'Roboto', sans-serif;">Styled with a web font</p>

Loading a Custom Font with @font-face

The @font-face rule lets you define your own font family by pointing to font files hosted on your own server. Once declared, that family name can be used anywhere in your stylesheet, just like a system font.

Note: Serve your own font files when possible, so your page does not depend on a third-party service staying online.

Warning: If the font file path is wrong, the browser silently falls back to the next font in the stack without any visible error.

Example: Loading a Custom Font with @font-face

markup

<style>
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2');
  }
  p {
    font-family: 'MyFont', sans-serif;
  }
</style>

Providing Font Formats and Fallbacks

Not every browser supports the same font formats, so it is good practice to list multiple formats inside a single @font-face rule and always end your font-family list with a generic fallback such as sans-serif or serif.

Note: List WOFF2 first, since it offers the best compression, and let older formats act as fallbacks.

Warning: Skipping a generic fallback family can leave text unreadable if every listed font fails to load.

Example: Providing Font Formats and Fallbacks

markup

<style>
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
  }
  body {
    font-family: 'MyFont', sans-serif;
  }
</style>

Controlling Font Loading with font-display

The font-display property controls how a browser handles text while a custom font is still downloading, letting you choose between showing fallback text immediately or waiting briefly for the custom font.

Note: Use font-display: swap so visitors can start reading with a fallback font instead of staring at invisible text.

Warning: Without font-display, some browsers hide text completely until the custom font finishes downloading, which can frustrate visitors on slow connections.

Example: Controlling Font Loading with font-display

markup

<style>
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2');
    font-display: swap;
  }
</style>

Optimizing Web Fonts for Performance

Because font files add extra network requests, keeping your font selection lean and using compressed formats is one of the easiest ways to improve how quickly a page feels ready to read.

Note: Subset your fonts to include only the characters your site actually needs, which can shrink file size significantly.

Warning: Loading four or five font weights for a single typeface can noticeably slow down a page, especially for visitors on mobile networks.

Example: Optimizing Web Fonts for Performance

markup

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400" rel="stylesheet">

Common Mistakes

Loading many font weights and styles that are never actually used, which slows down page rendering for every visitor.
Forgetting to provide a fallback font stack, so text disappears entirely while the custom font is still downloading.
Hosting large uncompressed font files instead of using efficient formats like WOFF2.

Chapter Summary

Web fonts are downloaded by the browser and let any website use custom typefaces beyond the visitor's installed fonts.
The @font-face rule defines a custom font family and points to the font files that should be downloaded.
Always provide fallback fonts and use font-display to control how text appears while a font is loading.

Browser Support

Web fonts and the @font-face rule are supported by all modern browsers, with WOFF2 as the most widely supported format.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Responsive Images Next Lesson → HTML Icon Fonts

HTML Web Fonts

What Are Web Fonts?

Loading a Custom Font with @font-face

Providing Font Formats and Fallbacks

Controlling Font Loading with font-display

Optimizing Web Fonts for Performance

Chapter Quiz — Complete all 20 topics to unlock

Login to run this code