CSS - font-synthesis-weight Property

The font-synthesis-weight determines whether or not the browser may synthesize bold typeface when it is missing in a font family.

Possible Values

  • auto: Browser may synthesize the missing bold typeface.

  • none: Synthesis of missing bold typeface by browser is not allowed.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontSynthesisWeight = "auto | none";

CSS font-synthesis-weight - Basic Example

Here is an example:

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<style>
   .fontfmly {
  font-family: "Montserrat", sans-serif;
}
.no-syn {
  font-synthesis-weight: none;
}
</style>
</head>
<body>
   <p class="fontfmly">
      Text here is in <strong>bold typeface</strong>.
    </p>
    
    <p class="fontfmly no-syn">
      Synthesis of <strong>bold</strong> typeface is turned off.
    </p>
</body>
</html>
Advertisements