Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

CSS font-synthesis Property

  • Last Updated : 16 Jul, 2020

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.

    Syntax:

    font-synthesis:none;

    Example: 






    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" 
            content="width=device-width,
                     initial-scale=1.0">
      <title>Document</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:

    • Style: According to this a italic typeface may be synthesized by the browser if required.

      Syntax:

      font-synthesis: style

      Example: 




      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, 
                       initial-scale=1.0">
        <title>Document</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:

      • weight: According to this a bold typeface may be synthesized by the browser if required.

        Syntax:

        font-synthesis: weight

        Example:




        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" 
                content="width=device-width,
                         initial-scale=1.0">
          <title>Document</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:

        • Style weight:  According to this a bold and italic typeface may be synthesized by the browser if required.

          Syntax:

          font-synthesis: style weight

          Example:




          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" 
                  content="width=device-width, 
                           initial-scale=1.0">
            <title>Document</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>

          Output:

        Supported Browsers:

        • Firefox
        • Apple Safari



        My Personal Notes arrow_drop_up
Recommended Articles
Page :