CSS Font Shorthand
The font shorthand sets several font properties, including style, weight, size, line-height, and family, in one declaration.
The <font> shorthand bundles the most common font properties into a single line. It is compact, but it has a strict order and a couple of required parts you must respect.
Order and rules
- Optional parts come first: font-style, font-variant, and font-weight, in any order.
- font-size is required and comes next.
- line-height is optional and, if used, follows the size after a slash.
- font-family is required and must come last.
A full shorthand
<!DOCTYPE html>
<html>
<head>
<style>
p {
font: italic 400 16px/1.5 Arial, sans-serif;
}
</style>
</head>
<body>
<p>Set every font property at once with the shorthand.</p>
</body>
</html>The example above reads as italic style, weight 400, size 16px with a line-height of 1.5, using Arial with a sans-serif fallback.
A minimal shorthand
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font: 700 1.5rem Georgia, serif;
}
</style>
</head>
<body>
<h2>Section Title</h2>
</body>
</html>Note: Any font property you leave out of the shorthand is reset to its default value, so set the ones you care about explicitly.
Exercise: CSS Fonts
Why do developers list several fonts in `font-family`, like `"Helvetica", Arial, sans-serif`?
