font-synthesis
The font-synthesis shorthand CSS property lets you specify whether or not the browser may synthesize the bold, italic, small-caps, and/or subscript and superscript typefaces when they are missing in the specified font-family.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 97 | 97 | 34 | 9 | 97 | 9 | |
position | | | 118 | | | |
small-caps | 97 | 97 | 93 | 10.1 | 97 | 10.3 |
style | 97 | 97 | 34 | 10.1 | 97 | 10.3 |
weight | 97 | 97 | 34 | 10.1 | 97 | 10.3 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
body {
font-synthesis: none;
}
.allow-bold {
font-synthesis: weight;
}
.allow-all {
font-synthesis: weight style small-caps;
}Live demo
Use cases
-
Using font-synthesis
The font-synthesis shorthand CSS property lets you specify whether or not the browser may synthesize the bold, italic, small-caps, and/or subscript and superscript typefaces when they are missing in the specified font-family.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.