The font-synthesis-weight CSS property lets you specify whether or not the browser may synthesize the bold typeface when it is missing in a font family.

It is often convenient to use the shorthand property font-synthesis to control all typeface synthesis values.

Syntax

/* Keyword values */
font-synthesis-weight: auto;
font-synthesis-weight: none;

/* Global values */
font-synthesis-weight: inherit;
font-synthesis-weight: initial;
font-synthesis-weight: revert;
font-synthesis-weight: revert-layer;
font-synthesis-weight: unset;

Values

auto

Indicates that the missing bold typeface may be synthesized by the browser if needed.

none

Indicates that the synthesis of the missing bold typeface by the browser is not allowed.

Formal definition

Formal syntax

font-synthesis-weight = 
  auto  |
  none  

Examples

Disabling synthesis of bold typeface

This example shows turning off synthesis of the bold typeface by the browser in the Montserrat font.

HTML

<p class="english">
  This is the default <strong>bold typeface</strong> and
  <em>oblique typeface</em>.
</p>

<p class="english no-syn">
  The <strong>bold typeface</strong> is turned off here but not the
  <em>oblique typeface</em>.
</p>

CSS

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

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

Result

Specifications

Browser compatibility

See also

• font-synthesis shorthand, font-synthesis-small-caps, font-synthesis-style
• font-style, font-variant, font-weight