Font shorthand properties in css

What is Font shorthand?

This topic deals with how to write Font Shorthand in CSS. To style text, we used to specify different properties in single, different lines. Now, all that presentational information can be placed in one CSS document. Each command listed just once. Font shorthand property sets all the font properties in one declaration. With one line of css, we can add the font properties.

Advantages of using font shorthand?

* One of the main advantages of using CSS shorthand is reduction in web page download/load time.
* Using CSS font shorthand will reduce number of css lines.

The properties for font that can be set, are (in order): “font-style font-variant font-weight font-size/line-height font-family”

The font-size and font-family values are required. If one or the other value is missing, the default values will be inserted, if any.

How to write font shorthand CSS?

For using the shorthand, we should know the default font properties.

Default Font Properties

The default properties of font are the following.

.classname {
   font-style: normal , italic , oblique;font-variant:normal , small-caps;
   font-weight: normal , bold , bolder , lighter, (100-900);
   font-size: number+unit ;
   line-height: normal ,number+unit ;
   font-family: font-name,"more names";
}

Default Font Property Values

.classname {
   font-style: normal;font-variant:normal;
   font-weight: normal;
   font-size: inherit;
   line-height: normal;
   font-family:inherit;
}

We will add the properties in one line. So the shorthand for font property syntax will be like the following:

The Font Shorthand Property

.classname {
   font:normal
        normal
        normal
        inhert/
        normal
        inherit;
}

Example for Font Shorthand Property

.classname {
    font:bold 1em/1.2em Arial,"times new roman",serif;
}

This CSS shorthand for font will work only if we specify both font-size and the font-family. The font-family command must always be at the end of the shorthand command. The font-size must come directly before this. If you don’t specify the font-weight, font-style or font-variant, then the default values will be applied.

Note that you can change the order in which some properties appear. Most browsers will allow this. However, to avoid any problems with current or future browsers that may be stricter in their interpretation, it is a best practice to supply the properties in the order that the W3C lists them in the specification.

So, start using shorthand which will help to reduce the number of lines in css files and increase the page load speed.

The same way, we can use short hand properties for background, padding, margin, border-radius etc..