CSS font-synthesis-weight Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The font-synthesis-weight CSS property is a feature that allows web developers to control how fonts are synthesized or blended when a specific font weight is not available in a font family. When a desired font weight is missing, this property lets developers decide whether to synthesize a similar weight by altering the thickness of the available font or to fall back to a more distant weight that might not match the design as closely. This property can be particularly useful for maintaining consistent typography on web pages when the exact font weights needed are not available in the chosen font family.

Initial value: auto
Applies to: all elements. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.fontSynthesisWeight

Syntax

font-synthesis-weight: auto | none

Values

autoThe browser may synthesize the missing font style if needed.
noneThe browser must not synthesize the missing font style.

Example

HTML

<p class="english">

  This is the default <strong>bold typeface</strong> and

  <em>oblique typeface</em>.

</p>



<p class="english no-syn">

  The <strong>bold typeface</strong> is turned off here but not the

  <em>oblique typeface</em>.

</p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.no-syn {
  font-synthesis-weight: none;
}

Result

Editor