Web Fonts

What is a Web Font?

A web font is a font file loaded over HTTP/HTTPS and applied to text in a web page, rather than relying on fonts installed on the user's operating system. The @font-face CSS rule enables web fonts, and the WOFF2 format (Web Open Font Format 2) is the standard delivery format used on the modern web.

Web fonts allow designers to use consistent, brand-specific typography across all devices and operating systems, solving the long-standing limitation of relying on a small set of universally-installed "web-safe" fonts.

WOFF2: The Standard Web Font Format

WOFF2, defined in the W3C specification, is a compressed container format for OpenType fonts. It uses Brotli compression (replacing the zlib used in WOFF1), achieving approximately 30% better compression than WOFF1 and typically 50–70% smaller than the raw OTF/TTF file.

@font-face {
  font-family: "Inter";
  font-weight: 100 900;   /* Variable font weight range */
  font-style: normal;
  font-display: swap;     /* Show fallback immediately, swap when loaded */
  src:
    url("/fonts/inter-var.woff2") format("woff2"),
    url("/fonts/inter-var.ttf")   format("truetype");  /* Fallback */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

font-display: Controlling Loading Behavior

The font-display descriptor controls the tradeoff between showing unstyled text immediately (FOUT — Flash of Unstyled Text) and waiting for the font (FOIT — Flash of Invisible Text):

font-display: swap is recommended for body text; optional is recommended for decorative fonts.

CJK Web Font Challenges

CJK (Chinese, Japanese, Korean) web fonts present unique challenges:

• A full CJK font covering all unified ideographs contains 65,000–100,000 glyphs and weighs 5–30 MB
• Even a practical subset of "common" Chinese characters (3,500 characters) produces a font of 1–3 MB
• Loading a 3 MB font on a mobile connection causes significant page weight issues

Strategies for CJK web fonts:

1. Unicode-range subsetting: Serve only the characters actually used (see unicode-range CSS descriptor)
2. On-demand subsetting: Services like Google Fonts and Adobe Fonts generate per-page subsets
3. Dynamic subsetting APIs: Font subsetting APIs accept a list of characters and return a minimal font file containing only those glyphs
4. System fonts: Fall back to the platform's CJK system font for body text, using web fonts only for headings

# Python font subsetting with fonttools
from fontTools.subset import Subsetter, Options

options = Options()
subsetter = Subsetter(options=options)
subsetter.populate(text="常用漢字テキスト")
# Produces a font with only the required glyphs

Variable Fonts on the Web

Variable fonts (OpenType 1.8+) are increasingly used on the web because a single variable font file replaces multiple separate weight/style files:

• Traditional: 8 files (thin, light, regular, medium, semibold, bold, extrabold, black)
• Variable: 1 file with continuous weight axis from 100–900

For Latin scripts, a variable WOFF2 is typically 80–150 KB — smaller than two traditional static weight files combined.

Quick Facts