Font shorthand
The font CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.
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 shorthand property sets all the different properties of an element's font.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.