The font Shorthand Property
The font property is the ultimate shorthand for typography. It allows you to set up to six related font properties in a single, efficient CSS declaration. Using the shorthand dramatically reduces the length of your stylesheet and improves readability.
The Full font Syntax
When using the font shorthand, you must follow a very strict order for the values, and some properties are optional while others are required.
Required and Optional Order
The simplified, most common syntax looks like this:
font: <font-style> <font-weight> <font-size> / <line-height> <font-family>;
| Property | Required / Optional | Notes |
|---|---|---|
font-style | Optional | E.g., italic, normal. Must come before font-weight. |
font-weight | Optional | E.g., bold, 400. Must come before font-size. |
font-size | Required | Must be the third value, followed immediately by the line height. |
/ line-height | Optional | The / is required if you include line-height. |
font-family | Required | Must be the final value. |
The Critical Requirement
The two required values, font-size and font-family, must always be the last two items in the list (with font-family being the absolute last).
Practical Examples
1. Simple Body Text
This example sets the size and the font stack. All other properties default to normal.
/* Sets size to 1rem and uses the sans-serif font stack */
body {
font: 1rem sans-serif;
}
This is shorthand for:
font-size: 1rem;
font-family: sans-serif;
font-style: normal;
font-weight: normal;
2. Heading with Style and Weight
This example includes font-weight and font-style before the required properties.
/* Italic, Bold, 2.5rem size, using a serif font */
h1 {
font: italic bold 2.5rem serif;
}
3. Including line-height
To specify line-height, you must insert a forward slash (/) immediately after the font-size value.
/* Bold, 18px size, line height of 1.6, using a sans-serif stack */
.article-text {
font: bold 18px / 1.6 "Roboto", Arial, sans-serif;
}
A Note on Unspecified Values
When you use the font shorthand, any omitted optional properties (like font-style or font-weight) are reset to their initial default values (normal or 400).
This is important because if you had set a custom font-weight: 700; earlier in your stylesheet, and then later used font: 1rem sans-serif; (omitting bold), the weight would be reset to normal (400).
This is a key difference between shorthand and individual properties.
Interactive font Shorthand Demo
Use the live editor to test different combinations. See how omitting line-height or font-style affects the text, and observe the strict order requirement.
Challenge: Remove the / 1.8 from the CSS line. The line spacing will instantly snap back to the browser's default, demonstrating that the line-height property was successfully reset.