Shorthand Fonts

Contact Us or call 1-877-932-8228
Shorthand Fonts

Shorthand Fonts

The font property, which is well supported, is used to set the individual properties for font-style, font-variant, font-weight, font-size, line-height and font-family.

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

When using shorthand for the font property, note that:

  • Order matters.
  • You must set values for font-size and font-family in that order.
  • When setting a font name with spaces in the name, e.g. Times New Roman, you must enclose it within quotation marks.
  • Values for font-size and font-family are required. All other values are optional. If omitted; the initial values will be used.
    • Initial values can trick you here. If you use the font property for h1, which is bold by default, but you don't assign a value for the font-weight portion, the initial value of "normal" will be used and the h1 will not appear bold.
  • When setting the font-size and line-height in the same declaration, they must be side by side with a slash between the two values as shown below:


    selector {
    					font: font-size/line-height;
CSS Initial Values for the font Property
Property Initial Value
font-style normal
font-variant normal
font-weight normal
font-size medium
line-height normal
font-family browser default

Code Sample:

---- C O D E   O M I T T E D ---- {
	font: .75em verdana; /* At a minimum, you'll need to set font-size and font-family in that order. */

p.two {
	font: bold small-caps small/110% "Times New Roman", serif; /* Sets the font-weight, font-variant, font-size/line-height, and font-family with both a font name and serif. */

p.three {
	font: 1em/1.2em sans-serif; /* Sets the font-size/line-height and font-family. */

p.four {
	font: sans-serif; /* Incorrect styling - font-size required*/
---- C O D E   O M I T T E D ----

Code Explanation

The above code will render the following:Screen capture: The font shorthand property values