CSS Shorthand Font Property

Updated on

There are two ways to write CSS: Longhand and Shorthand.  Both accomplish the same thing.  Using shorthand you can save keystrokes and minimize lines, which will decrease your file sizes.

Example of setting your font-properties the traditional longhand way:

font-size: 12px;
font-family: "Times New Roman", Times;
font-style: italic;
font-weight: bold;
line-height: 1.4em;

In shorthand, the CSS code becomes:

font: italic small-caps normal 12px/1.4em "Times New Roman", Times;
Newsletter
Join over 280,000 independent website owners

The next person to join our monthly newsletter gets a 25% off coupon!

We guarantee 100% privacy. Your information will not be shared.

This entry was posted in . Bookmark the permalink.

9 thoughts on “CSS Shorthand Font Property”

  1. I am also trying to change the font size in the menu. I copied this (font-size: 12px;)into the customization field for fonts, but they didn’t change? Thanks for your help.

  2. Hi, I have Seneca, and I love the fonts, I just don’t like the shadow effect on the site title. I am not familiar with css, but in the editor i found this:

    #site-title {

    display: block;

    text-shadow: 1px 1px 0 #F2EFE6, 2px 2px 0 #444;

    text-transform: uppercase;

    font-weight: bold;

    font-size: 4em;

    Would I just delete the part that says text shadow? Any help is much appreciated. I would hate to mess anything up.

    1. It works. Are you actually applying the CSS about to an html element? You would do it like this:

      p { font: italic small-caps normal 12px/1.4em “Times New Roman”, Times; }

  3. Hi, how can I change the default font colour of wordpress posts? Also the earlier bold fonts are not visible either. Please help.

Leave a Reply