Menu
The font property is shorthand for font-style, font-variant, font-weight, font-size/line-height, and font-family (in that order).
Default values are used if any of the optional values are missing, but font-size and font-family are required.
/*
wrap <code> tags inside <pre> tags to create code blocks like this
*/font-style
Designates a text’s font style. Default: “normal”.
font-variant
Designates whether or not text should be displayed in a small-caps font. Default: “normal”.
font-weight
Determines how thin or thick text characters will be displayed. Default: “normal”.
font-size/line-height
Designates a text’s font size and line-height. Default: “normal”.
font-family
Designates a text’s font family. Default: browser’s determination.
caption
Uses the same font as what is used by captioned controls (drop-downs, buttons, etc.)
icon
Uses the same font as what is used by icon labels.
menu
Uses the same font as what is used by dropdown menus.
message-box
Uses the same font as what is used by dialog boxes.
smaller-caption
Uses a smaller version of the caption font.
status-bar
Uses the same font as what is used by the status bar.
initial
Sets the property to its default value.
inherit
Inherits this property’s value from its parent item.
Have a code example of font? Submit a codepen.io demo and we'll showcase it here ↴