bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Font Property

The CSS Font Shorthand Property

To shorten the code, it is possible to specify all the individual font properties in one declaration.

The CSS

font property is a shorthand property for:

Formula

font - style font - variant font - weight font - stretch font - size line - height font - family

Rules for the CSS Font Shorthand Property

Formula

The font - size and font - family values are required. If one of the other values is missing, their default value are used.
If defined, font - style, font - variant and font - weight must precede font - size.
If defined, line - height must immediately follow font - size, preceded by "/", like this: 15px/30px.
font - family must be the last value specified.

Example

Use the font shorthand property to set multiple font properties in one declaration:

p.a {
font: 20px Arial, sans-serif;
}
p.b {

font:

italic bold 16px Arial, sans-serif;
}
p.c {
font: italic small-caps bold 15px/30px Georgia, serif;
}

All CSS Font Properties

Property

Description font

Formula

Sets all the font properties in one declaration font - family

Specifies the font family for text font-size

Specifies the font size of text font-style

Specifies the font style for text font-variant

Formula

Specifies whether or not a text should be displayed in a small - caps font font - weight

Specifies the weight of a font

Previous

CSS Great Font Pairings

Next

CSS Icons - Font Awesome