Prevent Synthetic Bold with font-synthesis-weight: none

This article explains how the CSS property font-synthesis-weight: none stops browsers from automatically generating artificial bold text. When a requested bold typeface is missing from a font family, browsers by default simulate bolding by distorting the standard glyphs. By applying font-synthesis-weight: none, you force the browser to display only authentic font files, maintaining typographically accurate shapes and avoiding deformed text rendering.

What Synthetic Bold Is and Why It Happens

When you apply font-weight: 700 or font-weight: bold to an element, the browser searches the loaded @font-face rules and system resources for an actual bold cut of that typeface. If only a regular weight (such as 400) is available, the browser does not default to showing the regular text as-is. Instead, it engages an internal algorithm known as "faux bold" or synthetic bolding.

To create synthetic bold, the browser takes the regular glyph outlines and smears, offsets, or extrudes them horizontally by a few pixels. This process ignores the deliberate design choices made by type designers: counters (the open spaces inside letters like "e" and "o") clog up, stroke contrast disappears, and kerning pairs become uneven.

How font-synthesis-weight: none Intervenes

By default, the browser's font-synthesis-weight property is set to auto. This default value grants the rendering engine permission to synthesize a heavier stroke whenever a designated bold variant is missing.

Setting font-synthesis-weight: none explicitly revokes this permission.

body {
  font-family: "CustomFont", sans-serif;
  font-synthesis-weight: none;
}

When this rule is active, the browser alters its font-matching algorithm:

  1. The browser checks for an available, authentic bold face for the requested element.
  2. If a true bold face exists, it is rendered normally.
  3. If no bold face exists, the browser skips the outline-extrusion phase entirely.
  4. The browser falls back to displaying the nearest available genuine weight—typically the normal weight (400)—retaining crisp contours, correct spacing, and original stroke proportions.

Granular Control via font-synthesis Properties

The font-synthesis specification is split into longhand properties that control specific forms of browser distortion:

  • font-synthesis-weight: Controls faux bolding.
  • font-synthesis-style: Controls faux italics (oblique slanting of upright glyphs).
  • font-synthesis-small-caps: Controls synthetic small capital generation.

Using font-synthesis-weight: none isolates the bolding behavior without necessarily restricting italic synthesis, although you can disable all artificial distortions entirely by using the shorthand font-synthesis: none.

Typographic and Performance Implications

Employing font-synthesis-weight: none serves as a failsafe against design degradation. It is particularly useful when loading custom web fonts via third-party CDNs or variable fonts where network latency or missing font files might otherwise trigger synthetic generation.

While using this property ensures aesthetic integrity by preventing distorted glyphs, it also shifts visual responsibility back to the developer: if visual hierarchy depends on bold text, you must ensure the true bold font resource is properly loaded and mapped in your stylesheet.