font
The font
CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by font
, the longhands font-size-adjust
and font-kerning
are also reset to their initial values.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
The font
property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.
If font
is specified as a system keyword, it must be one of: caption
, icon
, menu
, message-box
, small-caption
, status-bar
.
If font
is specified as a shorthand for several font-related properties, then:
- it must include values for:
- it may optionally include values for:
font-style
,font-variant
andfont-weight
must precedefont-size
font-variant
may only specify the values defined in CSS 2.1, that isnormal
andsmall-caps
font-stretch
may only be a single keyword value.line-height
must immediately followfont-size
, preceded by "/", like this: "16px/3
"font-family
must be the last value specified.
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.
System font values
caption
- The system font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon
- The system font used to label icons.
- The system font used in menus (e.g., dropdown menus and menu lists).
message-box
- The system font used in dialog boxes.
small-caption
- The system font used for labeling small controls.
status-bar
- The system font used in window status bars.
- Prefixed system font keywords
- Browsers often implement several more, prefixed, keywords: Gecko implements
-moz-window
,-moz-document
,-moz-desktop
,-moz-info
,-moz-dialog
,-moz-button
,-moz-pull-down-menu
,-moz-list
, and-moz-field
.
Formal definition
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:
|
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
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
Setting font properties
/* 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).
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. |
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
BCD tables only load in the browser