CSS variable fonts: declare the supported weight range

When to use it

A reconciliation dashboard uses one family for headings and dense numerical labels. Its selected variable font file has a documented weight range from 320 to 720, and the card heading requests 620 to separate it from body text without loading another static file. Declare the actual range, not an imagined one. The sample names a deployment asset that must exist before the rule is shipped; system-ui remains the font fallback. Inspect the rendered font in developer tools, because a misspelled family or failed request can make a fallback font appear to prove the weight works. Compare regular and heading weights at small sizes, high zoom, and with a long translated title. If the font file lacks the requested range, the browser may choose or synthesize a different face. Use font-weight for the registered weight axis; reserve font-variation-settings for axes without a suitable higher-level property.

@font-face { font-family: 'Ledger Variable'; src: url('/assets/ledger-variable.woff2') format('woff2'); font-style: normal; font-weight: 320 720; font-display: swap; }
.ledger-card { font-family: 'Ledger Variable', system-ui, sans-serif; }
.ledger-card__title { font-weight: 620; }

Cost and verification

A single variable file can replace several weight files, but its transfer size is not automatically smaller. Inspect the real WOFF2 size and the font-loading waterfall before choosing it. A swap can change line breaks if fallback metrics differ, so test the title before and after font load. The file path in this lesson is illustrative; a missing file leaves the fallback family, which may have different metrics and no intermediate weight. Keep the range accurate to the actual font metadata. Serving a full multilingual variable font when a small subset suffices can cost more bytes than a few static faces. The content remains text and should stay readable while fonts load.

Common Mistakes

• Do not declare a weight range the file does not contain.
• Do not treat a fallback font as proof that the variable file loaded.
• Do not use low-level axis settings for an ordinary font-weight decision.

Connected lessons

• CSS Property Decisions
• CSS font loading: keep content readable while a font arrives
• CSS font shorthand and fallback stack: keep type stable during loading
• CSS font-size-adjust: steady readable fallback text

Further rendering decisions

• CSS font-variation-settings: use a verified custom axis