CSS font-synthesis Property

Last Updated : 12 Jun, 2023

The font-synthesis property controls the synthesis of the missing type style such as bold, italic, or underline by the browser. Different font languages like Chinese and Japanese do not include these font variants so synthesizing them may hinder the legibility of the text so the default browser synthesis of the font must be turned off.

Syntax:

font-synthesis: none | weight | style | style weight;

Property Values:

none: None indicates that one can not synthesize the weight and style typeface.
Style: According to this italic typeface may be synthesized by the browser if required.
weight: According to this a bold typeface may be synthesized by the browser if required.
Style weight: According to this a bold and italic typeface may be synthesized by the browser if required.

Example: In this example, we are using font-synthesis: none property.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0">
    <title>CSS font-synthesis Property</title>
</head>
<style>
    em {
        font-weight: bold;
    }
 
    .para {
        font-synthesis: none;
    }
</style>
 
<body>
    <span>With font-synthesis: none</span><br>
    <em class="para">Geeks for geeks | ???</em>
    <br />
    <span>Without font-synthesis property
    </span><br>
    <em>Geeks for geeks | ???</em>
</body>
</html>

Output:

Example: In this example, we are using font-synthesis: style property.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0">
    <title>CSS font-synthesis Property</title>
</head>
<style>
    em {
        font-weight: bold;
    }
 
    .para {
        font-synthesis: style;
    }
</style>
 
<body>
    <span>Without font-synthesis
        property</span><br>
    <em>Geeks for geeks | ???</em>
    <br>
    <span>With font-synthesis: Style
    </span><br>
    <em class="para">Geeks for geeks | ???</em>
</body>
</html>

Output:

Example: In this example, we are using font-synthesis: weight property.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0">
    <title>CSS font-synthesis Property</title>
</head>
<style>
    em {
        font-weight: bold;
    }
 
    .para {
        font-synthesis: weight;
    }
</style>
 
<body>
    <span>Without font-synthesis property</span><br>
    <em>Geeks for geeks | ???</em>
    <br>
    <span>With font-synthesis: Weight</span><br>
    <em class="para">Geeks for geeks | ???</em>
</body>
</html>

Output:

Example: In this example, we are using font-synthesis: style weight property.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0">
    <title>CSS font-synthesis Property</title>
</head>
<style>
    em {
        font-weight: bold;
    }
 
    .para {
        font-synthesis: style weight;
    }
</style>
 
<body>
    <span>Without font-synthesis property</span><br>
    <em>Geeks for geeks | ???</em>
    <br>
    <span>With font-synthesis: Style Weight</span><br>
    <em class="para">Geeks for geeks | ???</em>
</body>
</html>