How to Use the CSS font Shorthand Property Correctly?

You tidy up a component by collapsing five font declarations into one line: font: bold 1.125rem Inter. It looks cleaner, the linter is happy, and then QA reports that the card titles have lost their tabular figures, the line height jumped back to the browser default, and in Safari the font fell back to Times. Nothing in the diff looks wrong, but the shorthand quietly reset half a dozen properties you did not mention and the unquoted family name fell through to the next fallback.

The font shorthand is one of the oldest properties in CSS and one of the easiest to misuse. This article covers its exact syntax and value order, every property it resets, the mistakes that make it invalid, the system font keywords, and when you are better off with longhands.

What Is the font Shorthand?

The font shorthand sets several font-related properties in a single declaration. At minimum it sets the font size and the font family; optionally it also sets style, variant, weight, stretch, and line height.

/* Longhand */
.card-title {
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  font-family: "Source Serif 4", Georgia, serif;
}

/* Shorthand equivalent */
.card-title {
  font: italic 600 1.25rem/1.3 "Source Serif 4", Georgia, serif;
}

Those two blocks are not exactly equivalent, though, because the shorthand also resets properties that the longhand version leaves alone. That difference is the source of most bugs.

The Syntax and Value Order

The order is strict at the end and flexible at the start:

font: [font-style] [font-variant] [font-weight] [font-width] font-size [/ line-height] font-family

Position	Property	Required?	Accepted values in the shorthand
Any order, first	font-style	No	normal, italic, oblique
Any order, first	font-variant	No	Only normal or small-caps
Any order, first	font-weight	No	normal, bold, bolder, lighter, or a number 1–1000
Any order, first	font-width (stretch)	No	Keywords only, such as condensed or expanded
Second to last	font-size	Yes	Any length, percentage, or keyword
After a slash	line-height	No	Number, length, percentage, or normal
Last	font-family	Yes	A comma-separated family list

The rules that follow from the table:

1. Size and family are mandatory. Leave either out and the entire declaration is invalid.
2. Family must be last. Everything after the size (and optional line height) is parsed as the family list.
3. Style, variant, weight, and stretch must come before the size, in any order among themselves.
4. Line height must follow the size, separated by a slash, with no other values in between.

These are all valid:

.a { font: 1rem system-ui, sans-serif; }
.b { font: 700 2rem/1.1 "Inter", sans-serif; }
.c { font: italic small-caps 600 1.125rem/1.6 Georgia, serif; }
.d { font: 600 italic 1rem/1.5 Georgia, serif; }   /* order of the first group is free */
.e { font: condensed 800 3rem/1 "Roboto Flex", sans-serif; }

Limited Values for Variant and Stretch

The shorthand only accepts the CSS 2.1 subset of some sub-properties. For font-variant, only small-caps is allowed. Values like tabular-nums or all-small-caps are invalid inside font and have to be set with their longhands. For font-width (formerly font-stretch), only keywords like semi-condensed work. A percentage such as 75% is not accepted in the shorthand.

What the Shorthand Resets

This is the part most developers miss. Any sub-property you do not specify is reset to its initial value, not left alone. And beyond the visible sub-properties, the CSS Fonts specification has font reset a set of other font properties to their initial values as well.

Property	Reset to	Typical consequence
font-style	normal	Inherited italics are lost
font-weight	normal	A parent's weight no longer applies
line-height	normal	Line height jumps to the font's default, often about 1.2
font-variant-* (all)	normal	Tabular figures, small caps, ligature settings are lost
font-width	normal	Condensed styles are lost
font-size-adjust	none	Fallback size matching is lost
font-kerning	auto	Explicit kerning settings are lost
font-optical-sizing	auto	Manual optical size control is lost
font-variation-settings	normal	Custom variable font axes are lost
font-feature-settings	normal	Stylistic sets and other OpenType features are lost

So if a parent sets line-height: 1.6 and a child uses font: 1rem Inter, sans-serif, the child's line height becomes normal, not 1.6. And if a utility class sets font-variant-numeric: tabular-nums earlier in the cascade, a later font shorthand wipes it out.

/* Bug: the shorthand later in the file resets the tabular figures */
.metric {
  font-variant-numeric: tabular-nums;
}

.dashboard .metric {
  font: 600 2rem/1 var(--font-body);
}

Browser engines have not always implemented every one of these hidden resets at the same time, so do not depend on the reset behaviour in either direction. The fix is either to put the longhand after the shorthand or to avoid the shorthand in places where other font properties are set independently. If you rely on OpenType features, the article on font-feature-settings for advanced typography explains how those properties layer.

Common Mistakes That Make font Invalid

When a shorthand is invalid, the browser drops the entire declaration and falls back to whatever the cascade would otherwise provide. DevTools shows it crossed out with a warning icon.

Missing the Family

/* Invalid: no family */
.title {
  font: bold 1.5rem;
}

/* Valid */
.title {
  font: bold 1.5rem/1.2 var(--font-heading);
}

If you only want to change weight and size, use the longhands.

Putting Style or Weight After the Size

/* Invalid: weight after size gets parsed as part of the family */
.title {
  font: 1.5rem bold Inter, sans-serif;
}

Spaces in Family Names Without Quotes

Unquoted family names are allowed if they are valid CSS identifiers, so font: 1rem Source Serif 4, serif is technically problematic because "4" starts with a digit and is not a valid identifier. Quote any family name that contains spaces, digits, or punctuation:

.body {
  font: 1rem/1.6 "Source Serif 4", Georgia, serif;
}

Never quote generic families like serif, sans-serif, monospace, or system-ui. Quoted, they are treated as a font literally named "serif", which does not exist.

Units on Line Height That Inherit Badly

font: 1rem/24px ... is valid, but children inherit the fixed 24px line height, which is cramped for large headings inside. Use a unitless line height: font: 1rem/1.5 .... The reasoning is covered in what is leading and how to set line height.

Custom Properties That Fail

You can build the shorthand from variables, but if any variable resolves to something invalid, the whole declaration fails at computed-value time and every font sub-property resets to inherited or initial values, which is worse than a single bad longhand.

.button {
  font: var(--button-weight, 600) var(--button-size, 1rem) / var(--button-leading, 1.2) var(--font-body, system-ui, sans-serif);
}

Providing fallbacks inside each var() reduces the risk. For a system built around variables, see CSS custom properties for a typography system.

The Best Use: font: inherit on Form Controls

The single most useful application of the shorthand is a one-line reset. Form controls such as button, input, select, and textarea do not inherit font properties from their parents in most browsers. They use system defaults, which is why buttons often render in a different font and size from the surrounding page.

button,
input,
select,
textarea {
  font: inherit;
}

Because font covers family, size, weight, style, and line height, this one declaration makes form controls match their context. Most modern CSS resets include it. In this case, resetting everything is exactly what you want.

You can also use font: inherit on elements like pre or code inside a component where you want them to match the surrounding text rather than the browser's monospace default, although usually you will want a code font there.

System Font Keywords

The shorthand accepts special keywords that apply the operating system's font for a UI context:

Keyword	Uses the system font for
caption	Captioned controls such as buttons
icon	Icon labels
menu	Menus and dropdowns
message-box	Dialog boxes
small-caption	Small control labels
status-bar	Window status bars

.native-menu {
  font: menu;
}

These set all the font sub-properties at once to match the platform. They are rarely used on websites because results vary widely across operating systems, and they cannot be combined with other values in the same declaration. If you want the native UI typeface, a system font stack with system-ui is more predictable, as explained in what is a system font stack.

Safari also supports Apple-specific keywords like -apple-system-body that follow the iOS Dynamic Type setting. They are non-standard, so only use them inside an @supports block as an enhancement for Apple devices.

@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body;
  }

  body {
    font-family: var(--font-body);
  }
}

When to Use the Shorthand vs. Longhands

Situation	Use
Resetting form controls to match the page	font: inherit
Defining a complete text style in one place (a role class)	Shorthand is fine
Changing one or two properties in a component or variant	Longhands
Elements that also use font-variant-* or feature settings	Longhands, or set those after the shorthand
Utility classes and atomic CSS	Longhands
Canvas 2D text (ctx.font)	Shorthand is required

A good mental model: the shorthand defines a text style; longhands adjust one. Use the shorthand at the top of a typographic role, such as body text or a heading level, where you want every sub-property set intentionally. Use longhands everywhere else.

/* Define the role completely */
.text-h2 {
  font: 700 var(--text-h2-size) / 1.15 var(--font-heading);
  letter-spacing: -0.01em;
}

/* Adjust only what changes */
.text-h2.is-muted {
  font-weight: 500;
}

The Canvas Exception

In the Canvas 2D API, the font property is the only way to set text style, and it uses the CSS shorthand syntax:

const ctx = canvas.getContext("2d");
ctx.font = '600 24px "Inter", system-ui, sans-serif';
ctx.fillText("Revenue: $12,480", 20, 40);

The same rules apply: size and family are required, and an invalid string is silently ignored, leaving the previous font in place. Canvas does not support line height in this string in a meaningful way, and web fonts must be loaded (for example with document.fonts.load()) before drawing, or the fallback is used.

Tailwind CSS v4 and the Shorthand

Tailwind does not expose a font shorthand utility. It sets longhands through separate utilities, which avoids the reset problem entirely. The closest equivalent is combining a size with a line height using the slash modifier:

<h2 class="font-heading text-3xl/tight font-bold italic">A complete heading style</h2>

In custom CSS within a Tailwind project, the shorthand still works, but be careful about mixing it with utilities on the same element. A component class using font: declared in a later layer will override utility classes like tabular-nums or leading-7.

Debugging Shorthand Problems

1. Look for strikethrough in DevTools. An invalid shorthand is crossed out with a warning; hover for the reason.
2. Check the Computed panel. Expand font-variant-numeric, line-height, and font-feature-settings to see which rule set the final value. If it shows the font shorthand, that is your reset.
3. Search for late shorthands. In large codebases, run a quick search for shorthand declarations to find any that sit after utility or feature classes:

grep -rn --include="*.css" -E "^\s*font:\s" src/

4. Validate the family list. If text renders in the fallback font, check for unquoted names with digits or spaces, or a typo in the first family.

font Shorthand FAQ

Conclusion

The font shorthand is compact and occasionally indispensable, but it is not a simple abbreviation. It requires a size and a family, demands that the family come last and the line height follow a slash, accepts only a limited subset of values for variant and stretch, and resets everything you leave out, including OpenType features and variable font settings that you cannot even write inside it.

Use it deliberately. font: inherit on form controls is a best practice. A full shorthand at the top of a typographic role class is clean and safe. Everywhere else, prefer longhands so small adjustments stay small. When something in your type suddenly reverts to defaults, check the Computed panel for a late font declaration first; it is usually the culprit.

Here are some useful references for going deeper on the font shorthand:

1. MDN Web Docs: font — syntax, constituent properties, and system font keywords.
2. W3C: CSS Fonts Module Level 4 — the specification, including the full list of properties the shorthand resets.
3. MDN Web Docs: CanvasRenderingContext2D: font property — using the shorthand syntax for canvas text.
4. CSS-Tricks: font almanac entry — practical examples of shorthand usage.