Font Shorthand Examples

Examples of the font CSS Style Property

The font style property is a shorthand style property that defines many aspects of font styles in one line of CSS.

The Font Size

This paragraph is written in a font sized 0.8ems.
The quick brown fox jumped over the lazy dog.

font: 0.8em inherit;

This paragraph is written in a font sized 0.8ems.
The quick brown fox jumped over the lazy dog.

font: 1.2em inherit;

The Font Family

This paragraph is written in a sans-serif font, starting with "Verdana".
The quick brown fox jumped over the lazy dog.

font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;

This paragraph is written in a serif font, starting with "MS Serif".
The quick brown fox jumped over the lazy dog.

font: 1em "MS Serif", "New York", "Times New Roman" serif;

You Can Even Adjust the Line Height

This paragraph is 1em in size and a san-serif font. The distance between two lines is now 1.5em.
The quick brown fox jumped over the lazy dog.

font: italic small-caps bold 1em/1.5em Verdana, Geneva, Arial, Helvetica, sans-serif;

Add the Font Weight

This paragraph is 1em, a san-serif font, and bold.
The quick brown fox jumped over the lazy dog.

font: bold 1em Verdana, Geneva, Arial, Helvetica, sans-serif;

Add in Italics

This paragraph is 1em, a san-serif font, bold, and italic.
The quick brown fox jumped over the lazy dog.

font: italic bold 1em Verdana, Geneva, Arial, Helvetica, sans-serif;

What About Small-Caps

This paragraph is 1em, a san-serif font, bold, italic, and small-caps.
The quick brown fox jumped over the lazy dog.

font: italic small-caps bold 1em Verdana, Geneva, Arial, Helvetica, sans-serif;

System Font Styles

This paragraph is written in the same font as the system uses for captioned controls (e.g., buttons, drop-downs, etc.).
The quick brown fox jumped over the lazy dog.

font: caption;

This paragraph is written in the same font as the system uses for icons.
The quick brown fox jumped over the lazy dog.

font: icon;

This paragraph is written in the same font as the system uses for menus (e.g., dropdown menus and menu lists).
The quick brown fox jumped over the lazy dog.

font: menu;

This paragraph is written in the same font as the system uses for dialog boxes.
The quick brown fox jumped over the lazy dog.

font: message-box;

This paragraph is written in the same font as the system uses for small controls.
The quick brown fox jumped over the lazy dog.

font: small-caption;

This paragraph is written in the same font as the system uses for window status bars.
The quick brown fox jumped over the lazy dog.

font: status-bar;

Discuss in my forum