CSS - font-synthesis-style Property

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

Possible Values

  • auto: Browser may synthesize the missing oblique typeface.

  • none: Synthesis of missing oblique typeface by browser is not allowed.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontSynthesisStyle = "auto | none";

CSS font-synthesis-style - Basic Example

Here is an example:

<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<style>
    .fontfmly {
        font-family: "Montserrat", sans-serif;
    }
    .no-syn {
        font-synthesis-style: none;
    }
    .syn {
        font-synthesis-style: auto;
    }
</style>
</head>
<body>
    <p class="fontfmly">
        The text is in <em>oblique</em> typeface here.
    </p>

    <p class="fontfmly no-syn">
        The synthesis of <em>oblique</em> typeface is set to none.
    </p>

    <p class="fontfmly syn">
        The synthesis of <em>oblique</em> typeface is set to auto.
    </p>
</body>
</html>
Advertisements