font

Last updated on: March 14, 2013

The font property in CSS is a shorthand property that combines all the following properties in one declaration.

font-stretch - normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded

font-style - normal, italic, oblique, inherit

font-variant - normal, small-caps, inherit

font-weight - normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit

font-size - xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, <length>, percentage, inherit

line-height - normal, number (font-size multiplier), <length>, percentage

font-family - sans-serif, serif, monospace, cursive, fantasy, caption, icon, menu, message-box, small-caption, status-bar, "string"

The font property can combine all that, like this:

font: [font-stretch] [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

body {
  font: normal small-caps normal 16px/1.4 Georgia;
}

More Information

• W3C Spec
• CSS-Tricks article: px – em – % – pt – keyword
• Jonathan Snook: font size with rem

Browser Support