CSS3’s Font Shorthand

Published July 12, 2016 by CSS Newbies.

There are many CSS font properties available to style your fonts. If you need to define the font-style, size, family, and weight, that can add up to a lot of lines of CSS. Fortunately, however, there is a shorthand for CSS font properties. Here’s the formula:

selector{
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}

Make sure you don’t forget the forward slash between font-size and line-height. Let’s see it in action:

p{
font: italic small-caps bold 20px/2 Futura;
}

Screen Shot 2016-07-10 at 12.45.16 PM

As you can see, using the shorthand for font is an effective way to clean up your stylesheets!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>