CSS Typography The Font Shorthand

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

With the syntax:

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

You can have all your font-related styles in one declaration with the font shorthand. Simply use the font property, and put your values in the correct order.

For example, to make all p elements bold with a font size of 20px and using Arial as the font family typically you would code it as follows:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

However with the font shorthand it can be condensed as follows:

p {
    font: bold 20px Arial, sans-serif;
}

Note: that since font-style, font-variant, font-weight and line-height are optional, the three of them are skipped in this example. It is important to note that using the shortcut resets the other attributes not given. Another important point is that the two necessary attributes for the font shortcut to work are font-size and font-family. If they are not both included the shortcut is ignored.

Initial value for each of the properties:

  • font-style: normal;
  • font-variant: normal;
  • font-weight: normal;
  • font-stretch: normal;
  • font-size: medium;
  • line-height: normal;
  • font-family – depends on user agent


Got any CSS Question?