Font

Shorthand to set font properties:

      element { font: [Font-style] [Font-variant] [Font-weight] Font-size [Line-height] Font-family ;}

This shorthand is equivalent to the following:

element { 
  font-style: normal | italic | oblique;
  font-variant: normal | small-caps;
  font-weight: normal | bold | bolder | lighter | (100-900);
  font-size: (number+unit) | (xx-small - xx-large);
  line-height: normal | (number+unit);
  font-family: fontname1,"font name2";
}

Alternatively you can choose to inherit from a parent element: font: inherit ;

The default font property values, any value that is not specified in the shorthand will be set to the default, even if set separately in another css rule.

  font-style:  normal;
  font-variant: normal;
  font-weight: normal;
  font-size:   inherit;
  line-height: normal;
  font-family: inherit;

iOS and OSX system fonts

The font: shorthand can also be used to specify dynamic font styles in iOS and OS X.
These are shorthand for a group of style definitions:

-apple-system-headline1, -apple-system-headline2, -apple-system-subheadline1, -apple-system-subheadline2, -apple-system-body, -apple-system-footnote, -apple-system-caption1, -apple-system-caption2, -apple-system-figure

Examples

Set the font of H1 to double size (200%) with the Verdana font family:

h1 {font: 200% Verdana,serif ;}

Try it:

“From all these experiences the most important thing I have learned is that legibility and beauty stand close together and that type design, in its restraint, should be only felt but not perceived by the reader.” ~ Adrian Frutiger

(CSS 1) Browser Support: All major browsers

“The real test of friendship is: can you literally do nothing with the other person? Can you enjoy those moments of life that are utterly simple?” - Eugene Kennedy

Related:

color - Color of text.
font-family - Font family for text.
font-size - Font size of text.
font-style - Font style for text.
font-weight - Normal, bold, bolder.
@font-face Download and use a web font.