CSS - font-synthesis-style Property

Quiz

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

Syntax

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

Property Values

Value	Description
auto	It specifies that the browser may synthesize the missing oblique typeface. Default.
none	It specifies that the synthesis of missing oblique 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 Style Property

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

Font Synthesis Style Property with Auto Value

To let the browser synthesize the style 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-style: italic;
         font-synthesis-weight: auto;
      }
   </style>
</head>

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

</html>

Font Synthesis Style Property with None Value

To prevent the browser from synthesizing the style 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-style: italic;
         font-synthesis-style: none;
      }
   </style>
</head>

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

</html>

Supported Browsers

Property
font-synthesis-style	97	97	111	16.4	83

css_properties_reference.htm

Print Page