font

font sets several font properties together. In its ordinary shorthand form, font-size and font-family are required; optional style, weight, variant, and width keywords come before the size.

Read the shorthand in order

Italic and bold precede the size. The slash introduces line-height, and the family list comes last. This declaration produces italic bold serif text with a 1.5 line-height multiplier.

<p>A complete font shorthand declaration.</p>

p {
  font:
    italic bold 1.125rem / 1.5 Georgia,
    serif;
}

Let a control inherit the document’s typography

Native controls may use their own font rules. Font:inherit copies the parent’s font settings; padding and border remain separate presentation choices.

<div class="form">
  <label for="name">Name</label><br /><input
    id="name"
    name="name"
    autocomplete="name"
  /><button type="button" onclick="this.textContent='Saved'">Save</button>
</div>

.form {
  font:
    1rem / 1.5 system-ui,
    sans-serif;
}
input,
button {
  font: inherit;
  padding: 0.5rem;
  min-height: 44px;
  box-sizing: border-box;
}
input {
  width: 100%;
  max-width: 18rem;
}

Resets and initial values

Font settings are inherited, but an explicit shorthand resets omitted constituents. Initial style, weight, and variant are normal; size is medium, line-height is normal, and the initial family is browser-dependent. Additional font settings, including feature, kerning, optical-sizing, and variant subproperties, can also be reset.

Only normal or small-caps fits the variant position in this shorthand; other font-variant features need separate declarations after it. Font-width accepts its compatible keyword form here, not arbitrary percentages. A system-font keyword such as caption is a separate one-keyword form, not a family list to combine with extra shorthand components.

Why a font changed unexpectedly

font: 1rem sans-serif clears an earlier bold, italic, or line-height setting. Place deliberate overrides after the shorthand. A family name does not download a font; use an available system font or a complete @font-face setup.

Learn font-family, font-size, line-height, and font-display.

Sources and browser support

MDN: font describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.