Font shorthand
The font CSS property shorthand sets multiple font properties, including style, weight, size, and font family.
Overview
The font CSS property shorthand sets multiple font properties, including style, weight, size, and font family.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
caption | 1 | 12 | 1 | 1 | 18 | 1 |
icon | 1 | 12 | 1 | 1 | 18 | 1 |
menu | 1 | 12 | 1 | 1 | 18 | 1 |
message-box | 1 | 12 | 1 | 1 | 18 | 1 |
small-caption | 1 | 12 | 1 | 1 | 18 | 1 |
status-bar | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.title {
font: bold 1.5rem/1.4 "Noto Sans JP", sans-serif;
}
.caption {
font: italic small-caps 0.875rem/1.6 serif;
}Live demo
Use cases
Using Font shorthand
The font CSS property shorthand sets multiple font properties, including style, weight, size, and font family.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features