font

« CSS « CSS Reference

Summary

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 few caveats when using the CSS font shorthand. If these conditions are not met, the property is invalid and is entirely ignored.

Syntax

font: font-style
|| font-variant
|| font-weight
]? font-size
[ / line-height
]? font-family

font: system_font

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-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
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.
Browsers implementing these often implements several more, prefixed, values; Gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list and -moz-field.

Examples

View Live 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 }

Specifications

Browser compatibility

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Shorthand 1.0 1.0 (1.0) 3.0-4.0 3.5 1.0 (85)
System fonts 1.0 1.0 (1.0) 4.0-5.5 6.0 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also

Tags (3)

Edit tags

Attachments (0)

 

Attach file