Fonts
font-synthesis
font-synthesis decides whether the browser may fake bold, italic, or small-caps glyphs by transforming the regular ones when the font lacks them.
Syntax
none | [ weight || style || small-caps || position ]Preview
Shorthand breakdown
font-synthesisCode
.box {
font-family: Inter, sans-serif;
font-style: italic;
font-variant-caps: small-caps;
font-synthesis: none;
}Controls
About
Values
Write none, or one or more of the following keywords separated by spaces (in any order). The browser may synthesize the listed ones and none of the others. none allows no synthesis at all.
weight: bold, made by thickening the strokes.style: italic, made by slanting the glyphs.small-caps: small capitals (small uppercase letters in place of lowercase), made by shrinking the capitals.position: superscript and subscript glyphs forfont-variant-position, made by shrinking and shifting the glyphs. Firefox only; Chrome, Edge, and Safari ignore any declaration that includesposition.
The initial value lists all four, weight style small-caps position, so everything may be synthesized.
Keeping Japanese upright
Most Japanese fonts have no italic glyphs, so font-style: italic makes the browser slant them. To italicize only the English text and keep Japanese upright, drop style from font-synthesis. English fonts with real italics still show them, while Japanese fonts without italics stay upright.
Longhands
font-synthesis is a shorthand for font-synthesis-weight, font-synthesis-style, font-synthesis-small-caps, and font-synthesis-position. Each takes auto to allow synthesis or none to forbid it. font-synthesis-position is Firefox only as well.
Making text bolder along a variable font's weight axis, or using small-caps glyphs the font already has, does not count as synthesis. Those are used regardless of this property.
So that the preview looks the same everywhere, it uses Inter, which the site already loads, with italics (font-style: italic) and small caps (font-variant-caps: small-caps) as supporting declarations. Inter has no italic or small-caps glyphs and the Japanese font has no italics, so dropping style straightens the text and dropping small-caps turns "bc" back into lowercase. Whether weight changes anything depends on whether the Japanese font used on your device has a bold face (Inter is a variable font with a weight axis, so the Latin letters stay the same).