Font Fallback

What is Font Fallback?

Font fallback is the mechanism by which a rendering system selects an alternative font when the primary font does not contain a glyph for a particular character. Because no single font covers the entire Unicode character set (which has over 149,000 assigned characters across 161 scripts), every text renderer must implement a strategy for gracefully handling characters that fall outside any single font's coverage.

When a font lacks a glyph for a character, the renderer walks through a prioritized list of alternative fonts until it finds one with the required glyph. If no font in the system covers the character, the renderer typically displays a fallback glyph — commonly a rectangular box, often called "tofu" (□), or a question mark in a box (▯).

CSS Font-Family Stacks

Web developers control font fallback through the CSS font-family property, which accepts a comma-separated list of fonts in priority order:

body {
  font-family:
    "Inter",           /* Preferred: Latin, Greek, Cyrillic */
    "Noto Sans",       /* Wide Unicode coverage fallback */
    -apple-system,     /* System UI font (Apple) */
    BlinkMacSystemFont,/* System UI font (Chrome/macOS) */
    "Segoe UI",        /* System UI font (Windows) */
    sans-serif;        /* Generic family (last resort) */
}

For multilingual sites, the stack should include fonts with strong coverage of the expected scripts. The Noto font family (Google's "No Tofu" project) provides consistent coverage across all Unicode scripts.

System Font Fallback Chains

Operating systems maintain their own fallback chains that activate after the CSS stack is exhausted. These are platform-specific:

Tofu: The Fallback-of-Last-Resort Glyph

When no font in the entire fallback chain covers a character, the renderer displays a tofu glyph — the term coined by Google engineers during the Noto project. The name comes from the block's resemblance to a cube of tofu. The standard tofu glyph is typically a rectangular box (□, U+25A1) or a box containing the character's hex code point.

The Last Resort Font (published by Unicode Consortium) is a special font designed specifically for this case. It contains a distinct representative glyph for every Unicode block, displaying a block-specific symbol inside a rectangular frame. This helps users and developers identify which script a character belongs to, even when no rendering font is available.

Performance and CJK Challenges

CJK fonts present special performance challenges in the fallback model because CJK fonts are enormous — a full CJK font covering all unified ideographs can be 5–30 MB. Loading multiple CJK fonts as part of a fallback chain has severe performance implications for web pages.

The unicode-range CSS descriptor allows a font to declare which code points it covers, so the browser can skip loading a font if none of the page's characters fall in its range.

Quick Facts