The font property is a shorthand property that sets different properties for an elements font in a single declaration.


font: <values>;

The font property can have the following properties as values:

Required values:

  • font-family
  • font-size

Optional values:

  • line-height
  • font-weight
  • font-stretch
  • font-style
  • font-varient

Note 1: font-style, font-variant, and font-weight must come before font-size.

Note 2: line-height must be declared after font-size and only following a forward slash.

Example 1

Setting an h1 elements font to Georgia italic, size of 10px, and line height of 40px in a single declaration.

h1 {
font: italic 10px/40px Georgia, sans-serif;

The above would be the same as:

h1 {
font-style: italic;
font-size: 10px;
line-height: 40px;
font-family: Georgia, sans-serif;

Example 2

Setting an h2 font with all seven properties in one decleration.

h2 {
/* font-stretch | font-style | font-varient | font-weight | font-size | line-height | font-family */
font: expanded italic small-caps bolder 20px/30px cursive;
Edit this page on GitHub


Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn CSS on Codecademy