CSS - font-synthesis-small-caps Property

Quiz

CSS font-synthesis-small-caps determines whether or not the browser may synthesize small-caps typeface when it is missing in a font family. They represent upper case letters but in reduced size of lowercase letters.

Syntax

font-synthesis-small-caps: auto | none | initial | inherit;

Property Values

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

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

Font Synthesis small-caps Property with Auto Value

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

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

</html>

Font Synthesis small-caps Property with None Value

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

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

</html>

Supported Browsers

Property
font-synthesis-small-caps	97	97	111	16.4	83

css_properties_reference.htm

Print Page