Font Synthesis: Avoiding Fake Bold and Italic

Apply font-weight: bold where only the regular font file is loaded—browsers synthesize (fake) bold by thickening letterforms. Result? Clunky typography compared to actual bold fonts.

What is Font Synthesis?

Font synthesis is a browser feature that automatically creates bold and italic variations when the actual font files aren't available. Instead of rendering nothing, the browser algorithmic ally generates styles:

• Bold synthesis: Artificially thickens letterforms by adding pixels/strokes
• Italic synthesis: Skews letters ~14° to simulate italics

Synthetic fonts almost always look inferior to properly designed variants.

The Problem with Synthetic Fonts

1. Poor Typography Quality

True bold fonts have refined proportions, adjusted spacing, and balanced stroke weights. Synthetic bold just makes everything heavier—clunky, unbalanced text.

2. Distorted Letterforms

Italic fonts have unique letterforms ('a', 'f', 'g' often differ completely from roman). Synthetic italics just slant letters—losing intentional design, creating an artificial look.

3. Inconsistent Appearance

Mixed true/synthetic fonts across your site = visually inconsistent typography, harming professional appearance.

When Font Synthesis Occurs

• Missing font files: Declared @font-face for regular but forgot bold/italic
• Loading failures: Network issues prevent bold/italic files from loading
• Incorrect declarations: CSS references weights that don't match available files
• Incomplete system fonts: Not all system fonts have full weight/style coverage

The font-synthesis Property

CSS provides font-synthesis to control this behavior:

/* Allow synthesis (default) */
font-synthesis: weight style;

/* Prevent ALL synthesis (recommended) */
font-synthesis: none;

/* Granular control (CSS Fonts Level 4) */
font-synthesis-weight: none;
font-synthesis-style: none;

Best Practice: Disable Font Synthesis

* {
  font-synthesis: none;
}

Forces explicit font loading—only real, designer-crafted variants appear.

Proper Font Loading

1. Declare All Variants

/* Regular */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

2. Use Variable Fonts

Variable fonts contain multiple weights/styles in one file—complete coverage, no synthesis risk:

@font-face {
  font-family: 'MyVariableFont';
  src: url('/fonts/myvariablefont.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: oblique 0deg 14deg;
}

3. Load Only What You Use

Design uses regular (400) + bold (700)? Don't load 9 weights. Wastes bandwidth and time.

Debugging Font Synthesis

1. DevTools: F12 → Computed → Rendered Fonts. Shows "synthesized-bold" or "synthesized-italic"
2. Visual comparison: Compare against font provider specimens. Synthetic looks different
3. Network tab: Using bold but no bold file loaded? Synthesis confirmed

Real-World Example

Loading Roboto Regular only:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">

Then applying bold:

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* ← Browser synthesizes this */
}

Fix: Load the actual bold weight:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wgt@400;700&display=swap" rel="stylesheet">