View video tutorial
CSS Font Shorthand
CSS
The shorthand property sets all properties on a single line.
CSS font shorthand
➔ The font property is a shorthand and sets all font properties on a single line.
➔ The following font properties can be set using the shorthand font attribute.
font-stylefont-variantfont-weightfont-size/line-height(required)font-family(required)
➔ Optional properties are set to their default values.
Syntax
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
Property values
| Name | Value | Description |
|---|---|---|
| font-style | normal, italic, or oblique | Sets the font style. |
| font-variant | normal, small-caps | Specifies whether the text is displayed in small-caps font or normal font. |
| font-weight | normal, bold, bolder, lighter | Determines the thickness or boldness of the characters. |
| font-size/line-height | Ex: large, 100%, 15px Ex: normal, 80%, 1.5 | font-size controls the size of the text (e.g. px, medium, em, rem, %) line-height sets the space between lines of text (e.g. px, normal, %). |
| font-family | Ex: "times", "courier", "arial" serif , sans-serif | Specifies the font family to use. |
| caption | caption | Uses the font used by the caption. |
| icon | icon | Uses the font used by the icon label. |
| menu | menu | Uses the fonts used in the dropdown menu. |
| message-box | message-box | Uses the fonts used in the dialog box. |
| small-caption | small-caption | A smaller version of the caption font. |
| status-bar | status-bar | Uses the fonts used in the status bar. |
| initial | initial | Sets the property to its default value. |
| inherit | inherit | The element inherits the property value from its parent element. |
Example
#p1 {
font: 20px Arial, sans-serif;
}
#p2 {
font: italic small-caps bold 12px/30px Georgia, serif;
}
#p3 {
font: italic small-caps bold 14px Georgia, serif;
}Click on the "Try it Now" button to see how it works.