The CSS property font is a shorthand for font-style, font-variant, font-weight, font-strech,font-size, line-height, fant-family

Syntax

font:
    font-style
    font-variant
    font-weight
    font-size/line-height
    font-family

Mandatory values:

The font-size and font-family properties are required for the font shorthand to work correctly. If values for these properties are not provided, the font property will be invalid and may not display properly.

font-size: medium|
    xx-small|x-small|small|smaller|
    large|x-large|xx-large|larger|
    length|initial|inherit;

font-family: font family name | initial | inherit

Optional values:

Omitting the values of these properties does not result in an error:

• font-style
• font-variant
• font-weight

If one of these values is omitted, the code is still considered valid, but the omitted property will not have a defined value and may default to the browser’s default value for that property.

font-style: normal | italic | oblique | initial | inherit

font-variant: normal | small-caps | initial | inherit

font-weight: normal | bold | bolder | lighter |
    100, 200, .. 400 (normal), 500,..900 |
    initial | inherit

See the Pen font-shorthand by majadc (@majadc) on CodePen.

Related

• font-size 62.5%
• Using vw for font size

Resources

MDN font