Font Shorthand

Syntax

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.

Comments

  1. User Avatar
    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:.

    Thanks!

  2. User Avatar
    Louis
    Permalink to comment#

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

    http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

  3. User Avatar
    Casey Dennison
    Permalink to comment#

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

  4. User Avatar
    Why

    Why on earth would you have Arial before Helvetica

  5. User Avatar
    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}

    • User Avatar
      Michael Moriarty
      Permalink to comment#

      …or even nicer maybe:

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

  6. User Avatar
    Rowe Morehouse
    Permalink to comment#

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

    see here: https://developer.mozilla.org/en-US/docs/Web/CSS/font

    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;

    • User Avatar
      Michael
      Permalink to comment#

      That defeats he purpose of using the SHORTHAND. Since you are setting those values to ‘normal’ anyway, why not just use font: 13px/19px sans-serif; ? Who uses px’s for line-height?

  7. User Avatar
    Michael Moriarty
    Permalink to comment#

    The CSS property font-stretch was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.

    Browser compatibility
    Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 48.0 9.0 (9.0) 9.0 35.0 No support

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag