font-synthesis
The font-synthesis CSS shorthand property disables all font synthesis except the given kinds. To disable a specific kind of font synthesis, instead use the longhand properties such as font-synthesis-style and font-synthesis-weight.
Overview
The font-synthesis CSS shorthand property disables all font synthesis except the given kinds. To disable a specific kind of font synthesis, instead use the longhand properties such as font-synthesis-style and font-synthesis-weight.
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 CSS shorthand property disables all font synthesis except the given kinds. To disable a specific kind of font synthesis, instead use the longhand properties such as font-synthesis-style and font-synthesis-weight.
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