CSS - font-synthesis-weight Property

Quiz

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

Syntax

font-synthesis-weight: auto | none | initial | inherit;

Property Values

Value	Description
auto	It specifies that the browser may synthesize the missing bold typeface. Default.
none	It specifies that the synthesis of missing bold typeface by browser is not allowed.
initial	It sets the property to its initial value.
inherit	It inherits the property from the parent element.

Examples of CSS Font Synthesis Weight Property

The following examples explain the font-synthesis-weight property with different values.

Font Synthesis Weight Property with Auto Value

To let the browser synthesize the weight in case, the specified font does not support it, we use the auto value. This is the default value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
      .example {
         margin-bottom: 20px;
         padding: 20px;
         border: 1px solid #ddd;
      }

      .auto {
         font-family: "Montserrat", sans-serif;
         font-weight: bold;
         font-synthesis-weight: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis-weight property
   </h2>
   <h4>
      font-synthesis-weight: auto
   </h4>
   <div class="example auto">
      Property: font-synthesis-weight. See how these words
      are appearing bold as the weight has been set to bold
      and synthesis has been set to the browser default.
      If the font Montserrat does not have bold, 
      then the browser will synthesize it.
   </div>
</body>

</html>

Font Synthesis Weight Property with None Value

To prevent the browser from synthesizing the weight even if the specified font does supports it, we use the none value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
      .example {
         margin-bottom: 20px;
         padding: 20px;
         border: 1px solid #ddd;
      }

      .none {
         font-family: "Montserrat", sans-serif;
         font-weight: bold;
         font-synthesis-weight: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis-weight property
   </h2>
   <h4>
      font-synthesis-weight: none
   </h4>
   <div class="example none">
      property: font-synthesis-weight. See how these words
      are not appearing bold even though their weight is
      bold. This is because the font-synthesis-weight has
      been set to none. Even if the font Montserrat has bold
      support, the browser will disable it.
   </div>
</body>

</html>

Supported Browsers

Property
font-synthesis-weight	97	97	111	16.4	83

css_properties_reference.htm

Print Page