CSS: font (shorthand)

By Xah Lee. Date: . Last updated: .

font shorthand

The font property is a shorthand for

font-style
normal, italic, oblique
font-variant
normal, small-caps
font-weight
normal, bold, 100-900, etc.
font-stretch
normal, condensed, expanded, etc.
font-size
16px, 1rem, 2em, etc.
line-height
1.5, 150%, 1.2em
font-family
"Arial", sans-serif, etc.

it was in CSS spec since 1990s.

Syntax

font: ?style ?variant ?weight ?stretch size/?line-height family;

font-size and font-family are required. all others are optional.

basic example

/* specify font-size, font-family */
body {
 font: 1rem Arial, sans-serif;
}

/* is equivalent to */

body {
 font-size: 1rem;
 font-family: Arial, sans-serif;
}

Example. font-size, line-height, font-family

/* specify font-size, line-height, font-family */
body {
 font: 1rem/1.5 Arial, sans-serif;
}

/*
the 1.5 is line-height.
Slash before it is required.
*/

/* above is equivalent to */

body {
 font-size: 1rem;
 line-height: 1.5;
 font-family: Arial, sans-serif;
}

Example. multiple choices of font-family

/* specify font-size and several choices for font-family */
body {
 font: 1rem/1.5 Arial, Helvetica, Arimo, sans-serif;
}

Example. With Style, Weight, and Size

h1 {
 font: italic bold 2.5rem/1.2 "Georgia", serif;
}

Equivalent to:

h1 {
 font-style: italic;
 font-weight: bold;
 font-size: 2.5rem;
 line-height: 1.2;
 font-family: "Georgia", serif;
}

Example. small-caps and font-stretch

.caption {
 font: small-caps condensed 0.9rem/1.4 system-ui, sans-serif;
}

CSS Font