Font shorthand property
Last updated: 2026-09-13
font Font shorthand property
The font CSS shorthand property sets all font-related sub-properties in a single declaration: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. It keeps stylesheets concise, but font-size and font-family are mandatory and the sub-properties must follow a fixed order.
| Category | |
|---|---|
| Initial Value | normal normal normal 1em/normal system-ui |
| Inherited | Yes |
| Applies To | all |
| Animation Type | font-weight |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
font: [ <font-style> || <font-variant> || <font-weight> || <font-stretch> ]? <font-size> [ / <line-height> ]? <font-family>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<font-style> || <font-variant> || <font-weight> || <font-size> / <line-height> || <font-family> | Value | Font shorthand for all font sub-properties |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Important： font-size and font-family are required; if either one is missing, the whole declaration is ignored.
Tip： The shorthand resets any omitted sub-properties to their initial values, so declare font before other rules that set individual font properties.
❓ FAQ
QShould I use the font shorthand or set sub-properties individually?
AUse the shorthand when you need to set several font properties at once — style, weight, size, line-height, and family — in a single line. However, it resets every omitted sub-property to its initial value, so when you only want to change one value (for example, switching font-weight to bold), write the longhand property instead to avoid wiping out your other settings.
QDoes the order of the font shorthand property values matter in CSS?
AYes. font-style, font-variant, font-weight, and font-stretch are optional and can appear in any order before font-size. font-size must be followed by an optional /line-height, and font-family must come last. Both font-size and font-family are required — if either is missing, the entire declaration is ignored.
QWhat does font: italic bold 20px/1.5 'Microsoft YaHei', sans-serif mean?
AIt sets font-style to italic, font-weight to bold, font-size to 20px, and line-height to 1.5 times the font size. The font-family list tries Microsoft YaHei first and falls back to the generic sans-serif if it is not installed. Omitted sub-properties such as font-variant are reset to their initial value of normal.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
