W3cubDocs

/CSS

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.

Try it

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:
- <font-size>
- <font-family>
it may optionally include values for:
font-style, font-variant and font-weight must precede font-size
font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps
font-stretch may only be a single keyword value.
line-height must immediately follow font-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.
menu: 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: `font-style`: `normal` `font-variant`: `normal` `font-weight`: `normal` `font-stretch`: `normal` `font-size`: `medium` `line-height`: `normal` `font-family`: depends on user agent
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Percentages	as each of the properties of the shorthand: `font-size`: refer to the parent element's font size `line-height`: refer to the font size of the element itself
Computed value	as each of the properties of the shorthand: `font-style`: as specified `font-variant`: as specified `font-weight`: the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value `font-stretch`: as specified `font-size`: as specified, but with relative lengths converted into absolute lengths `line-height`: for percentage and length values, the absolute length, otherwise as specified `font-family`: as specified
Animation type	as each of the properties of the shorthand: `font-style`: discrete `font-variant`: discrete `font-weight`: a font weight `font-stretch`: a font stretch `font-size`: a length `line-height`: either number or length `font-family`: discrete

Formal syntax

font = 
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]  |
  caption                                             |
  icon                                                |
  menu                                                |
  message-box                                         |
  small-caption                                       |
  status-bar                                          

<font-variant-css2> = 
  normal      |
  small-caps  

<font-stretch-css3> = 
  normal           |
  ultra-condensed  |
  extra-condensed  |
  condensed        |
  semi-condensed   |
  semi-expanded    |
  expanded         |
  extra-expanded   |
  ultra-expanded

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
CSS Fonts Module Level 4 # font-prop

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`font`	1	12	1	3	3.5	1	≤37	18	4	14	1	1.0
`font_stretch_support`	60	79	43	No	47	11	60	60	43	44	11	8.0
`system_fonts`	1	12	1	4	6	1	37	18	4	14	1	1.0