CSS font shorthand property

In the previous lesson, we discussed many properties for text. It is often quite expensive to separately specify each of these properties, so for greater convenience, CSS has a special shortcut property font. This property allows you to simultaneously set the font size, family, boldness, italic, and line spacing.

The property being described has the following syntax:

font-style font-weight font-size / line-height font-family

The order of the properties matters, and font-size and font-family are mandatory. Note that properties other than those described in the syntax above are not included in this shorthand property.

Let's look at some examples.

Example

Let's say we have the following styles:

p {
	font-size: 16px;
	font-family: Arial;
}

Let's rewrite them using the shorthand property:

p {
	font: 16px Arial;
}

Example

Let's say we have the following styles:

p {
	font-size: 16px;
	font-family: Arial;
	line-height: 50px;
}

Let's rewrite them using the shorthand property:

p {
	font: 16px/50px Arial;
}

Example

Let's say we have the following styles:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
}

Let's rewrite them using the shorthand property:

p {
	font: bold 16px Arial;
}

Example

Let's say we have the following styles:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
	line-height: 50px;
	font-style: italic;
}

Let's rewrite them using the shorthand property:

p {
	font: bold italic 16px/50px Arial;
}

Practical tasks

Shorten your code by using the font shorthand property:

p {
	font-family: "Times New Roman";
	font-size: 13px;
	line-height: 20px;
}

Shorten your code by using the font shorthand property:

p {
	width: 300px;
	font-family: Arial;
	color: red;
	font-size: 40px;
	font-weight: bold;
}

Shorten your code by using the font shorthand property:

p {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	text-indent: 50px;
	font-style: italic;
	line-height: 60px;
}