CSS - font-synthesis Property

Quiz

CSS font-synthesis property determines whether or not the browser should synthesize the bold, italic, and / or small-caps typefaces that are missing in the specified font-family. It is a shorthand property for the properties: font-synthesis-weight, font-synthesis-style, font-synthesis-small-caps and font-synthesis-position

Syntax

font-synthesis: none | weight | style | small-caps | position | initial | inherit;

Property Values

Value	Description
none	It indicates that no bold, italic, or small-caps typeface may be synthesized by the browser. Default.
weight	It indicates that the missing bold typeface may be synthesized by the browser if needed.
style	It indicates that the italic typeface may be synthesized by the browser if needed.
small-caps	It indicates that the small-caps typeface may be synthesized by the browser if needed.
position	It indicates that the subscript and superscript typeface may be synthesized by the browser, if needed.
initial	It sets the property to its initial value.
inherit	It inherits the property from the parent element.

Examples of CSS Font Synthesis Property

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

Font Synthesis Property with None Value

To not let the browser synthesize the bold, italic or small-caps typeface if the specified font does not have them, we use the none value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

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

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: none
   </h4>
   <div class="example no-synthesis">
      This text is styled with `font-synthesis: none;`.
      The browser will not synthesize any styles. 
      If the Arial font does not have a bold or 
      italic variant, those styles will not appear.
   </div>
</body>

</html>

Font Synthesis Property with Weight Value

To let the browser synthesize the bold typeface if the specified font does not have it, we use the weight value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

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

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: weight
   </h4>
   <div class="example synthesize-weight">
      This text is styled with `font-synthesis: weight;`.
      The browser will synthesize a bold version 
      if Arial does not include it.
   </div>
</body>

</html>

Font Synthesis Property with Style Value

To let the browser synthesize the italic typeface if the specified font does not have it, we use the style value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

      .synthesize-style {
         font-family: "Arial", sans-serif;
         font-style: italic;
         font-synthesis: style;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: style
   </h4>
   <div class="example synthesize-style">
      This text is styled with `font-synthesis: style;`.
      The browser will synthesize an italic version
      if Arial does not include it.
   </div>
</body>

</html>

Font Synthesis Property with Small Caps Value

To let the browser synthesize the small-caps typeface if the specified font does not have it, we use the small-caps value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

      .synthesize-small-caps {
         font-family: "Arial", sans-serif;
         font-variant-caps: small-caps;
         font-synthesis: small-caps;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: style
   </h4>
   <div class="example synthesize-small-caps">
      This has `font-synthesis: small-caps;`. The browser
      will synthesize a small-caps version if Arial does
      not include it.
   </div>
</body>

</html>

Font Synthesis Property with Position Value

To let the browser synthesize the subscript and superscript typeface if the specified font does not have them, we use the position value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
         font-family: "Arial", sans-serif;
         font-synthesis: position;
      }

      .synthesize-pos1 {
         font-variant-position: sub;
      }

      .synthesize-pos2 {
         font-variant-position: super;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: position
   </h4>
   <div class="example synthesize-pos1 synthesize-pos2">
      This text has `font-synthesis: position;`. The browser
      will synthesize a 
   <sup>
      superscript
   </sup> and 
   <sub>
      subscript
   </sub> 
      Arial text if it does not include it.
   </div>
</body>

</html>

Supported Browsers

Property
font-synthesis	97	97	34	9	83

css_reference.htm

Print Page