CSS font-synthesis Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-synthesis property controls whether the user agent is allowed to create (synthesize) missing font faces such as bold or italic when the chosen font family does not include them. When a page requests a weight or slope that the active font file doesn’t contain, the UA can either pick a fallback font that has the requested face or algorithmically generate a synthetic bold/italic from the available face. font-synthesis tells the UA which kinds of synthesis are permitted so authors can influence whether the browser should fake a style or prefer fallback fonts.

Synthesis is performed in two common ways: a weight synthesis that thickens glyph strokes to approximate bold, and a slant/oblique synthesis that skewes glyph outlines to approximate italic. These algorithmic transformations can produce visual and metric differences compared with real font instances — stroke contrast, spacing and alignment may change, glyph hinting can be less accurate, and line-height or text flow can be affected. That means allowing synthesis can be useful for maintaining a consistent font-family choice without triggering fallback substitution, but it can also produce less refined typography than using a proper bold or italic font file.

This property interacts directly with properties that request particular faces, such as font-weight and font-style. When those properties ask for a weight or style the font lacks, the browser consults font-synthesis to decide whether to synthesize or to use an alternative. It also connects with font selection and fallback behavior driven by font-family: authors who prefer exact typographic fidelity can disable synthesis so missing faces force fallback fonts (or expose the absence), while authors who prioritize staying on the same family can allow synthesis to avoid sudden family changes. Consider accessibility and legibility implications when permitting synthesis — synthetic styles may not provide the same emphasis or readability as true font instances, and they can affect layout and rendering performance.

Definition

Initial value: weight style
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.fontSynthesis

Interactive Demo

font-synthesis: weight style small-caps;

font-synthesis: none;

font-synthesis: weight;

font-synthesis: style;

font-synthesis: small-caps;

This font does not include bold, italic, small-caps, and subscript or superscript variants.

中文排版通常不运用粗体或斜体常不运用。

Syntax

font-synthesis: none | [ weight || style ]

Values

noneBrowser is not allowed to synthesize bold or oblique font when not available.
weightBrowser is only allowed to synthesize bold font when not available but not oblique.
styleBrowser is only allowed to synthesize oblique font when not available but not bold.
weight styleBrowser is allowed to synthesize both bold and oblique.

Example

HTML

<div class="wrap">

    <h1>font-synthesis demo</h1>

    <div class="row">

        <section>

            <h2>font-synthesis: none</h2>

            <p class="sample none italic">Requested: italic + bold  -  rendered with font-synthesis: none</p>

            <p class="sample none bold">Requested: bold  -  rendered with font-synthesis: none</p>

        </section>

        <section>

            <h2>font-synthesis: weight style</h2>

            <p class="sample synth italic">Requested: italic + bold  -  rendered with font-synthesis: weight style</p>

            <p class="sample synth bold">Requested: bold  -  rendered with font-synthesis: weight style</p>

        </section>

    </div>

</div>

CSS

/* Layout and base font */
.wrap {
    font-family: Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    padding: 20px;
}
.row {
    display: flex;
    gap: 24px;
}
section {
    flex: 1;
    background: #f8f9fb;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e3e6ea;
}
section h2 {
    margin-top: 0;
    font-size: 16px;
}
.sample {
    margin: 12px 0;
    font-size: 18px;
    line-height: 1.4;
}

/* Requested styles (what authors ask for) */
.italic {
    font-style: italic;
    font-weight: 700;
}
.bold {
    font-weight: 700;
}

/* Control font synthesis behavior */
.none {
    /* Prevent the UA from synthesizing missing bold/italic forms */
    font-synthesis: none;
}
.synth {
    /* Allow the UA to synthesize both weight and style when the font lacks them */
    font-synthesis: weight style;
}

/* Small responsive tweak */
@media (max-width: 640px) {
    .row { flex-direction: column; }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-synthesis property. Hover over a browser icon to see the version that first introduced support for this CSS property.