How to Control Faux Italics with CSS font-synthesis

The CSS font-synthesis property gives developers precise control over whether web browsers are allowed to synthetically generate missing font styles, most notably faux italics. When a custom web font lacks a dedicated italic typeface, browsers default to artificially slanting the upright Roman glyphs to simulate an italic style. By utilizing font-synthesis, web designers can disable this behavior to maintain typographic integrity, prevent distorted letterforms, and ensure that only properly designed italic typefaces are displayed.

The Problem with Faux Italics

When you apply font-style: italic to an element, the browser searches the loaded font family for an italic variant. If none is available, the rendering engine mathematically shears the upright standard font by a few degrees.

This automatic transformation produces "faux" or synthetic italics, which causes several typographic issues:

  • Distorted letter weights: Mathematical slanting warps stroke contrast and stresses.
  • Incorrect glyph shapes: True italics often feature entirely different cursive letter designs (such as a single-story "a" instead of a double-story "a"). Faux italics retain the Roman structure, looking unnatural.
  • Degraded readability: The uneven pixel rendering of slanted glyphs compromises legibility on lower-resolution displays.

How font-synthesis Controls Faux Italics

The font-synthesis shorthand property controls three synthesis behaviors: weight (faux bold), style (faux italics or oblique), and small-caps.

To prevent faux italics specifically, you can use either the shorthand property or the targeted longhand property:

/* Disable both faux bold and faux italic */
body {
  font-synthesis: none;
}

/* Allow synthetic bold, but forbid synthetic italics */
body {
  font-synthesis: weight;
}

/* Specifically target italics using the longhand property */
body {
  font-synthesis-style: none;
}

Setting font-synthesis-style: none instructs the browser that if a true italic variant is not declared or downloaded, it must not slant the text.

What Happens When Synthesis Is Disabled?

When you disable synthetic styles and an italic font file is missing, the browser takes one of two actions:

  1. Renders upright text: The text simply stays in its original upright (Roman) form while respecting other styling cues, avoiding unsightly distortion.
  2. Consults the font stack: If a secondary font in your font-family stack contains a true italic cut, the browser may fall back to that typeface for the italicized text instead of artificially distorting the primary font.

By adding font-synthesis: none or font-synthesis-style: none to your base CSS reset, you protect your design systems from unintended typographic degradation and enforce the use of genuine, well-crafted typefaces.