font-synthesis
Controls synthetic font styling (bold, italic, small-caps). Prevents browser from creating fake styles when the font lacks variants.
Quick example
body { font-synthesis: none; /* prevent synthetic bold/italic */ }
.bold { font-weight: bold; }Syntax
none | [ weight || style || small-caps || position]Quick facts
Initial value
weight style small-caps position Inherited
Yes
Examples
Prevent synthetic bold from unrequested font weights
.no-synthetic {
font-family: "OpenSans", sans-serif;
font-weight: 700;
font-synthesis: none;
/* If 700 weight isn't available, don't fake it */
}Disable synthetic font creation to ensure only real font weights display.
Allow only italic synthesis
em {
font-family: "MyFont", serif;
font-synthesis: style;
/* Allow synthetic italic but not synthetic bold */
}Control which font properties can be synthetically created.
Require small-caps
.small-caps {
font-family: "SourceSerif", serif;
font-variant: small-caps;
font-synthesis: weight style small-caps;
}font-synthesis: small-caps lets the browser synthesize small-caps if unavailable.
font-synthesis Browser Support
Widely availableSince 202285% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
97+
34+
9+
97+
Common pitfalls
Synthetic fonts look worse than real ones
If you set font-synthesis: none and a weight isn't available, the browser falls back to a thinner weight. This can break layouts.
Default behavior creates synthetics
By default, browsers synthesize missing bold/italic. Only set font-synthesis if you want to prevent this.