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 available Since 2018 85% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2018.
Safe to use without fallbacks.
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.