From W3C Wiki
Jump to: navigation, search


The font property is a shorthand property for setting the individual font properties (i.e., 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' and 'font-family') at the same place in the style sheet.


Values [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Initial value See individual properties
Applies to All elements
Inherited Yes


  • caption
    he font used for captioned controls(e.g., buttons, drop-downs, etc.).

  • icon
    The font used to label icons.

  • menu
    The font used in menus (e.g., dropdown menus and menu lists).

  • message-box
    The font used in dialog boxes.

  • small-caption
    The font used for labeling small controls.

  • status-bar
    The font used in window status bars.

  • inherit
    Takes the same specified value as the property for the element's parent.

And see also individual properties


Example A


   font: bold 1.2em Helvetica, Arial, sans-serif;
   font: italic 30px Times, Garamond;


  <h1>font property example</h1>
  <p>This is a paragraph.</p>

Csslist2 font.png

CSS Reference

The CSS specification defines the font property in 15.8 Shorthand font property.