All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Font Shorthand

Last updated on:


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.


  1. Ryan Hamilton
    Permalink to comment#

    Ah, so that’s why I wasn’t able to specify the size of fonts using font:! I’ve always just had to use font-size:.


  2. Louis
    Permalink to comment#

    In addition to the URL linked in the post, I have a cheat sheet for helping understand font shorthand:

  3. Casey Dennison
    Permalink to comment#

    Sorry, Louis. I cannot understand you’re cheat sheet.

  4. Why

    Why on earth would you have Arial before Helvetica

  5. Michael Moriarty
    Permalink to comment#

    So when we do a CSS reset, is the any reason to not use the font shorthand to initialize html, for example?
    eg. html {font:100%/125% Verdana,Arial,sans-serif}

    • Michael Moriarty
      Permalink to comment#

      …or even nicer maybe:

      html { font: 100%/1.25 Verdana, Arial, sans-serif }

  6. Rowe Morehouse
    Permalink to comment#

    I think you’re missing font-stretch in your shorthand declaration example.

    see here:

    the shorthand defaults to 4 normals up front like this:

    font: normal normal normal normal 13px/19px sans-serif;

    longhand would be:

    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 13px;
    line-height: 19px;
    font-family: sans-serif;

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed