The font property in CSS is a shorthand property that combines all the following properties in one declaration.
font-stretch – normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
font-style – normal, italic, oblique, inherit
font-variant – normal, small-caps, inherit
font-weight – normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
font-size – xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, <length>, percentage, inherit
line-height – normal, number (font-size multiplier), <length>, percentage
font-family – sans-serif, serif, monospace, cursive, fantasy, caption, icon, menu, message-box, small-caption, status-bar, “string”
The font property can combine all that, like this:
font: [font-stretch] [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
body {
font: normal small-caps normal 16px/1.4 Georgia;
}
Font Shorthand Gotchas
The font property is not as straightforward as other shorthand properties, partly due to the syntax requirements for it, and partly due to inheritance issues.
Here is a summary of some of the things you should know when using this shorthand property.
Mandatory Values
Two of the values in font shorthand are mandatory: font-size and font-family. If either of these is not included, the entire declaration will be ignored.
Also, font-family must be declared last of all values, otherwise, again, the entire declaration will be ignored.
Optional Values
All five of the other values are optional. If you include any of font-style, font-variant, andfont-weight, they must come before font-size in the declaration. If they aren’t, they will be ignored and may also cause the mandatory values to be ignored.
body {
font: italic small-caps bold 44px Georgia, sans-serif;
}
In the above example, three optionals are included. As long as these are defined before font-size, they can be placed in any order.
Including line-height is likewise optional but may be declared only after font-size and only following a forward slash:
body {
font: 44px/20px Georgia, sans-serif;
}
In the above example, the line-height is “20px”. If you omit line-height, you must also omit the slash, otherwise the entire line will be ignored.
Using font-stretch
The font-stretch property is new in CSS3 so if it is used in an older browser that doesn’t supportfont-stretch in font shorthand, it will cause the entire line to be ignored.
The spec recommends including a fallback without font-stretch, like this:
body {
font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */
font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif;
}
Inheritance for optionals
If you omit any of the optianal values (including line-height), the omitted optionals will not inherit values from their parent element, as is often the case with typographical properties. Instead, they will be reset to their initial state.
For example:
body {
font: italic small-caps bold 44px/50px Georgia, sans-serif;
}
p {
font: 30px Georgia, sans-serif;
}
In this case, the optional values (italic, small-caps, and bold) are placed on the font declaration on the <body> element. These will also apply to most child elements.
However, because we’ve redeclared the font property on the paragraph elements, all the optionals will be reset on the paragraphs, causing the style, variant, weight, and line-height to revert to their initial values.
Keywords for Defining System Fonts
In addition to the above syntax, the font property also allows use of keywords as values. They are:
captioniconmenumessage-boxsmall-captionstatus-bar
These keyword values set the font to the one that is used on the user’s operating system for that particular category. For example, defining “caption” will set the font on that element to use the same font that is used on the operating system for captioned controls (buttons, drop-downs, etc).
A single keyword comprises the entire value:
body {
font: menu;
}
The other properties mentioned earlier are not valid in conjunction with these keywords. These keywords can only be used with font shorthand and cannot be declared using any of the individual longhand properties.
Related Properties
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any | Any | Any | Any | Any | Any | Any |
Share
Tweet
Email
Leave a Reply