The font property

The font property is a shorthand property in which you can use the following CSS properties: font-size, font-style, font-weight, line-height, font-family, font-variant.

Syntax

cssselector {
  font: [font-style|font-variant|font-weight] font-size [/line-height] font-family;
}

The required properties are font-size and font-family, the rest can be omitted while maintaining order.

The font-style, font-variant, font-weight properties can be rearranged in any order relative to each other.

Please note that the line-height property is written with a slash after the font-size property.

Example

Let's make italic text of 15px size, with Arial type, and line spacing of 30px:

html<p>
  some long text
</p>

cssp {
  font: italic 15px/30px Arial;
  text-align: justify;
}

Результат:

Example

Another example:

html<p>
  some long text
</p>

cssp {
  font: bold 16px/20px "Times New Roman", Georgia, serif;
  text-align: justify;
}

Результат:

Example

Let's assign only a font size and family, omitting other properties:

html<p>
  some long text
</p>

cssp {
  font: 18px Arial;
  text-align: justify;
}

Результат:

Example

If you set only a font size, it will not be applied, since the font family must also be specified:

html<p>
  some long text
</p>

cssp {
  font: 30px;
  text-align: justify;
}

Результат: