Skip to main content
Home / Code Snippets / CSS / Font Shorthand

Font Shorthand


body {
  font: font-style font-variant font-weight font-size/line-height font-family;

In Use

body {
  font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

You need to supply at least font-size and font-family for the shorthand to work, otherwise it'll just be a syntax error and do nothing.

body {
  font: italic 20px Serif; /* works */
  font: 20px; /* fails */
  font: 18em Fantasy; /* works */
  font: bold small-caps; /* fails */

Watch out for accidental resets when using the shorthand.

icon-link icon-logo-star icon-search icon-star