The font
CSS property is either a shorthand property for setting font-style
, font-variant
, font-weight
, font-size
, line-height
and font-family
, or a way to set the element's font to a system font, using specific keywords.
As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.
Note: There are a few caveats when using the CSS
font
shorthand. If these conditions are not met, the property is invalid and is entirely ignored.
- Except when using a keyword, it is mandatory to define the value of both the
font-size
and thefont-family
properties. - Not all values of
font-variant
are allowed. Only the values defined in CSS 2.1 are allowed, that isnormal
andsmall-caps
. - Though not directly settable by
font
, the values offont-stretch
,font-size-adjust
andfont-kerning
are also reset to their initial values. - The order of the values is not completely free:
font-style
,font-variant
andfont-weight
must be defined, if any, before thefont-size
value. Theline-height
value must be defined immediately after thefont-size
, preceded by a mandatory/
. Finally thefont-family
is mandatory and must be the last value defined (inherit
value does not work).
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Percentages | as each of the properties of the shorthand:
|
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
Syntax
/* size | family */ font: 2em "Open Sans", sans-serif; /* style | size | family */ font: italic 2em "Open Sans", sans-serif; /* style | variant | weight | size/line-height | family */ font: italic small-caps bolder 16px/3 cursive; /* style | variant | weight | stretch | size/line-height | family */ font: italic small-caps bolder condensed 16px/3 cursive; /* The font used in system dialogs */ font: message-box; font: icon; /* Global values */ font: inherit; font: initial; font: unset;
Values
<'font-style'>
- See the
font-style
CSS property. <'font-variant'>
- See the
font-variant
CSS property. <'font-weight'>
- See the
font-weight
CSS property. <'font-stretch'>
- See the
font-stretch
CSS property. <'font-size'>
- See the
font-size
CSS property. <'line-height'>
- See the
line-height
CSS property. <'font-family'>
- See the
font-family
CSS property. caption
icon
menu
message-box
small-caption
status-bar
- Instead of specifying individual longhand properties, a keyword can be used to represent a specific system font:
caption
The 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. -moz-window
,-moz-document
,-moz-desktop
,-moz-info
,-moz-dialog
,-moz-button
,-moz-pull-down-menu
,-moz-list
and-moz-field
.
Formal syntax
[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
Examples
/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */ p { font: 12px/14px sans-serif }
/* Set the font size to 80% of the parent element or default value (if no parent element present) and set the font family to sans-serif */ p { font: 80% sans-serif }
/* Set the font weight to bold, the font-style to italic, the font size to large, and the font family to serif. */ p { font: bold italic large serif }
/* Use the same font as the status bar of the window */ p { font: status-bar }
Live Sample
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font' in that specification. |
Candidate Recommendation | Added support for font-stretch values |
CSS Level 2 (Revision 1) The definition of 'font-weight' in that specification. |
Recommendation | Added support for keywords |
CSS Level 1 The definition of 'font' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Shorthand | 1.0 | 1.0 (1.0) | 3.0 | 3.5 | 1.0 (85) |
System fonts | 1.0 | 1.0 (1.0) | 4.0 | 6.0 | 1.0 (85) |
Support of font-stretch values |
(Yes) | 43 (43) | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
Support of font-stretch values |
? | 43 (43) | ? | ? | ? |
Document Tags and Contributors
Tags:
Contributors to this page:
yisibl,
fscholz,
teoli,
Sebastianz,
Jeremie,
wbamberg,
HTMLValidator,
evinugur,
gorhgorh,
whit537,
kscarfone,
SiddharthBhatt,
Sheppy,
FredB,
Jesse,
ethertank,
jryans,
vlgalik,
brianloveswords,
grendel,
fryn,
Jürgen Jeka,
Kohei,
Mgjbot,
BijuGC,
Fredchat,
DBaron,
Backinblakk
Last updated by:
yisibl,