CSS Font Shorthand

The font shorthand sets several font properties in one line.

1
2
3

p {
  font: italic 600 1.125rem/1.6 Georgia, serif;
}

That is: style, weight, size, line-height (after a slash) and family.

The rules

1. The order is: style, variant, weight, size / line-height, family.
2. Size and family are required. Without both, the whole declaration is ignored.
3. Style and weight are optional but must come before the size.

1
2
3
4
5
6
7

<style>
  p {
    font: 600 1.25rem/1.5 Georgia, serif;
    color: #1a5276;
  }
</style>
<p>One declaration sets weight, size, line height and typeface.</p>

The hidden reset

The shorthand sets every font property it covers. Anything you do not write goes back to its default. If you earlier set line-height: 1.7 and then write font: 1rem Georgia;, the line height is reset to normal.

That is why many people avoid the shorthand and write separate properties, which are easier to read and do not reset things.

1
2
3
4
5
6

p {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
}