CSS font-synthesis-style Property

The font-synthesis-style property controls whether the user agent is allowed to produce an italic or oblique appearance for text when the selected typeface does not include a native italic/oblique face. It governs whether the browser will algorithmically slant or otherwise emulate a slanted form for glyphs requested by the document; this emulation is a fallback behavior used to satisfy requests for emphasis or for fonts declared with an italic style. By design this property affects only the style-synthesis aspect of font rendering, not the underlying font selection or substitution mechanics.

Synthesis of style is typically implemented by slanting glyph outlines or applying transformation heuristics rather than by using an authentic italic design created by the type designer. That difference can be significant: algorithmic slants often do not replicate the altered letterforms, stroke contrasts, or metric changes found in a true italic, and may break subtleties such as carefully tuned kerning, ligatures, or diacritic placement. For text-heavy UI or for typographic layouts where precise italic shapes are important (for example, fine typography, brand wordmarks, or languages with complex diacritics), allowing synthesis can produce visually inconsistent or less readable results. Conversely, synthesis can be helpful where the presence of an italic fallback is more important than typographic fidelity, such as when simple emphasis is required but no italic font is available.

This property interacts with other font-related controls in the cascade. The requested slanted appearance originates from declarations like font-style, and the choice of which font will be used when the preferred one is missing involves the font stack declared via font-family. Broader synthesis behavior — for example, whether the UA may synthesize both weight and style — is controlled by the higher-level font-synthesis property, and interactions with weight selection can involve font-weight. Understanding these relationships helps decide when to permit or disable style synthesis: allow it to ensure emphasis is visible when fonts are incomplete, or disable it to force explicit selection of an italic-capable font or to fall back to a different family with proper italic forms.

In practice, designers and developers commonly use this property as a safeguard: enable synthesis on systems with limited font availability to maintain emphasis semantics, or disable it to preserve typographic integrity and avoid unexpected visual differences. When disabling synthesis, the usual alternatives are to include proper italic faces via your font stack or via @font-face sources so the browser can use real italic designs, or to provide clear fallback families that include the needed styles. Consider also accessibility and content semantics — synthesized italics still convey emphasis to users, but they may look less distinct; weigh readability, brand requirements, and consistency when deciding whether to allow synthesized style.