The font shorthand sets several font properties in one declaration and requires a size and family. It can also set line height with a slash after the size.
Make this comfortable
CSS font shorthand and fallback stack: keep type stable during loading
When to use it
An operations console uses a compact sans-serif face for its toolbar. The named face may arrive after the first render or fail to load, so keep a system fallback that fits the available widths reasonably well. A shorthand resets constituent font properties not included in the declaration; this can undo an earlier weight or style unexpectedly. Scope it to the toolbar rather than applying a new font contract to every control in the app. The sample sets a readable size, line height, and family together. Test long labels under both the intended face and the fallback, and inspect weight changes if variable font files are involved. A stylesheet declaration does not prove the font asset was fetched successfully.
.operations-toolbar { font: 500 1rem/1.4 "Case Sans", system-ui, sans-serif; }
.operations-toolbar__count { font-variant-numeric: tabular-nums; }Cost and verification
A custom font adds transfer and decoding cost; the CSS shorthand alone is cheap. The actual font resource belongs to a separately reviewed @font-face definition and loading policy. If the fallback has much wider glyphs, controls can wrap or shift when the face loads. Keep enough flexible space and test with font loading blocked. Tabular numerals help counts align in a changing status display, but they do not change the meaning of the count. Prefer a stable platform font when the branded face adds little value to the task.
Common Mistakes
- Do not omit the required size and family from font shorthand.
- Do not assume omitted font properties retain earlier values.
- Do not ship a named family without reviewing its fallback rendering.
Connected lessons
css
reference
web