font-synthesisBaseline · Widely available
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.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 6, 2022. Widely available since Jul 6, 2024.
Browser support
DesktopChrome
1–96Not supported
97+Supportedsince Jan 4, 2022
Current: 155Edge
12–96Not supported
97+Supportedsince Jan 6, 2022
Current: 154Firefox
1–33Not supported
34+Supportedsince Dec 1, 2014
Current: 157Safari
1–8Not supported
9+Supportedsince Sep 30, 2015
Current: 27MobileChrome Android
18–96Not supported
97+Supportedsince Jan 4, 2022
Current: 155Firefox Android
4–33Not supported
34+Supportedsince Dec 1, 2014
Current: 157Safari iOS
1–8Not supported
9+Supportedsince Sep 16, 2015
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: font-synthesis.
Feature detection
CSS · check before using
@supports (font-synthesis: initial) {
/* styles that rely on font-synthesis */
}
/* or in JavaScript */
if (CSS.supports("font-synthesis", "initial")) {
// use it
}Documentation (MDN)
Specification
Sub-features
Support for each part of the feature (5). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| font-synthesis | 97 | 97 | 34 | 9 | 97 | 34 | 9 |
| font-synthesis.position | ✕ | ✕ | 118 | ✕ | ✕ | 118 | ✕ |
| font-synthesis.small-caps | 97 | 97 | 93 | 10.1 | 97 | 93 | 10.3 |
| font-synthesis.style | 97 | 97 | 34 | 10.1 | 97 | 34 | 10.3 |
| font-synthesis.weight | 97 | 97 | 34 | 10.1 | 97 | 34 | 10.3 |