Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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;

Reference URL


  1. 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. ysh
    Permalink to comment#

    thanks!! :D this really helps!! :3 woot wooot! :3

  3. Permalink to comment#

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

  4. Casey Dennison
    Permalink to comment#

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

  5. Permalink to comment#

    Thanks. very useful

  6. Why

    Why on earth would you have Arial before Helvetica

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>";