CSS font-synthesis-style Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The font-synthesis-style CSS property controls whether or not the browser is allowed to synthesize a font style that is not included in the specified font family. For example, if you specify the font family Lato in your CSS, but the Lato font family does not include an italic style, the browser will not render the text in italics unless you explicitly allow it to do so using the font-synthesis-style property.

Initial value: auto
Applies to: all elements. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.fontSynthesisStyle

Syntax

font-synthesis-style: auto | none

Values

autoThe browser may synthesize the missing font style if needed.
noneThe browser must not synthesize the missing font style.

Example

HTML

<p class="english">

  This is the default <em>oblique typeface</em> and

  <strong>bold typeface</strong>.

</p>



<p class="english no-syn">

  The <em>oblique typeface</em> is turned off here but not the

  <strong>bold typeface</strong>.

</p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.no-syn {
  font-synthesis-style: none;
}

Result

Editor