CSS: font (shorthand)

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.

• CSS: font-size

line-height

• CSS: line-height

font-family

"Arial", sans-serif, etc.

• CSS: font-family

the property font was in CSS spec since 1990s.

Syntax

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

• Values must be written in the order above.
• font-size and font-family are required. others are optional.
• line-height is separated from font-size by a slash /. Also 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;
}