Skip to content
Sri Lanka · Colombo · GlobalMon–Fri, 09:00–18:00 IST
Web Design 1 min read

The CSS font shorthand rule

font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif And thats a lot of code to type and the CSS file gets big with if you have a lot of font rules! There's no need though as you can use this CSS shorthand property: font...

Amila Rajapaksha
Written by
Amila Rajapaksha
CEO / Managing Director, Mobiz International (Pvt) Ltd

Amila Rajapaksha is the CEO and Managing Director of Mobiz International (Pvt) Ltd, a web design and development company based in Gampaha, Sri Lanka. Since 2010 he has helped businesses across Sri Lanka and overseas launch fast, search-friendly websites and online stores — working hands-on with WordPress, Magento and custom Laravel builds, and the SEO that makes them rank.

34 views 265 articles
Share:
When styling fonts with CSS you may be doing this: font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif And thats a lot of code to type and the CSS file gets big with if you have a lot of font rules! There's no need though as you can use this CSS shorthand property: font: bold italic small-caps 1em/1.5em verdana,sans-serif Much better! Just a few of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too. This is useful when you want to make your Joomla templates load faster, you can reduce the file size of your CSS files considerably by using this method.
Share:

Related Articles

Comments (0)

Log in or sign up to leave a comment.

No comments yet. Be the first to share your thoughts!