font-synthesis Demo - Online Control Browser Bold/Italic Generation

font-synthesis is a CSS property that controls whether the browser is allowed to artificially create bold, italic, or small-caps typefaces when the specified font family lacks those variants. By default, browsers synthesize missing weights and styles to prevent text from appearing unstyled — but this can lead to poor typography, especially with custom web fonts.

Setting font-synthesis: none prevents the browser from generating faux bold and faux italic. This is critical when you want to ensure only the actual, designer-crafted font variants are used. If a font lacks a true bold weight, setting font-weight: 700 with font-synthesis: none will simply show the regular weight — alerting you that the proper font file is missing rather than silently faking it.

Faux bold is created by the browser artificially thickening the glyph strokes of the regular weight. Faux italic (technically oblique) is created by mechanically slanting the regular glyphs. Both are inferior to true, professionally designed bold and italic typefaces. True italics often feature completely different letterforms (compare a true italic "a" to a slanted roman "a"), while faux italics merely slant the existing shapes.

The property accepts: none (disallow all synthesis), weight (allow bold synthesis only), style (allow italic synthesis only), small-caps (allow small-caps synthesis), or combinations like weight style (the default), weight style small-caps, etc. The small-caps value is newer and supported in Chrome 97+, Firefox 111+, and Safari 16.4+.

When you use @font-face to load custom fonts, it's common to only load specific weights (e.g., 400 and 700). If you apply font-weight: 600 to text using that font family, the browser may synthesize a semi-bold — even though you never loaded a 600-weight file. Using font-synthesis: none in your global styles ensures that only the explicitly loaded weights are used, making missing font weights immediately obvious during development.

Yes, indirectly. Synthesized bold and italic variants require additional browser computation during text rendering. More importantly, font-synthesis: none can serve as a debugging tool — it reveals missing font weights/styles so you can load the proper files, potentially reducing layout shifts and improving perceived performance by ensuring consistent typography.

There's no direct JavaScript API to detect synthesis. However, you can visually compare text with font-synthesis: none vs the default. If they look different when bold/italic is applied, synthesis was occurring. Developer tools in modern browsers also show "Rendered Fonts" information, which may indicate if the displayed font is a synthesized variant rather than a true one.

The none, weight, and style values have excellent support across all modern browsers (Chrome 97+, Firefox 111+, Safari 16.4+, Edge 97+). The small-caps value is newer but supported in the same browser versions. For older browsers, font-synthesis: none gracefully degrades — the property is simply ignored, and synthesis occurs as it did before the property existed.