@font-face

@font-face

@font-face registers a font under a name you then use in font-family. Its src list is tried in order (local() for an installed font, url() with an optional format() hint for a download); font-weight, font-style and font-stretch say which variant the file provides; unicode-range limits the characters it covers. The rule is Baseline widely available. Here Lobster applies to the digits 0-9 only.

A web font limited to digits with unicode-rangeHTMLLive

<style>
  @font-face {
    font-family: "Digits";
    src: local("Lobster"),
         url("https://cdn.jsdelivr.net/fontsource/fonts/lobster@latest/latin-400-normal.woff2")
         format("woff2");
    unicode-range: U+0030-0039;   /* 0-9 only */
    font-display: swap;
  }
  p { font: 34px "Digits", Georgia, serif; margin: 12px; }
</style>
<p>Order 2026 ships in 48 hours</p>

Browser output of Listing 4.23 — Browser output of 23

A face downloads only when the page uses a character in its range, which is how Google Fonts 1 splits families per script. font-display sets the loading behavior: block hides text briefly, swap shows the fallback and swaps whenever the font arrives, fallback swaps only within a short window, and optional uses the font only if it is ready almost at once. Prefer WOFF2 with swap or optional; Web Fonts and Variable Fonts covers variable fonts and subsetting.

MENU