CSS font-synthesis-weight: prevent a counterfeit bold face

When to use it

A legal notice uses a supplied regular and semibold family, so a mechanically thickened face would distort the approved letterforms. Scope the no-synthesis rule to the notice and request the actual available semibold weight for its emphasis. Test the regular face, the loaded semibold face, and the system fallback when the font request fails. If the fallback has no suitable semibold, the browser may choose a nearby real weight or show much weaker emphasis once synthesis is disabled; the notice must still communicate emphasis through its words and structure. Do not apply the rule across the entire site before auditing every font family and language subset. CJK or accented glyphs may come from a different face than the Latin title, so inspect mixed-script text. A typographic policy cannot replace semantic strong emphasis in the document.

.legal-notice { font-family: 'Ledger Variable', system-ui, sans-serif; font-synthesis-weight: none; }
.legal-notice strong { font-weight: 620; }

Cost and verification

Preventing synthesized bold can preserve a typeface's design, but it can also remove the visible weight difference when the intended face is missing. That is a correctness and accessibility risk, not a performance optimization. Check real font downloads and fallback rendering under network failure. If separate language subsets load at different times, visible weights may change as glyph fallback resolves. Keep the rule local and pair it with a known available font-weight range. Disabling synthesis does not shrink the font payload; it may require shipping a heavier face or a variable font that covers the desired weight. Test at normal and high zoom rather than judging only large headings.

Common Mistakes

• Do not disable synthetic weight without supplying a real emphasis weight.
• Do not assume every script in the notice comes from the same file.
• Do not replace semantic strong text with a visual weight alone.

Connected lessons

• CSS Property Decisions
• CSS variable fonts: declare the supported weight range
• CSS font loading: keep content readable while a font arrives
• HTML inline text: emphasis, importance, code, and abbreviations