font-synthesis-weight

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

css

/* 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

Initial value	`auto`
Applies to	all elements and text. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	as specified
Animation type	discrete

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

html


  This is the default bold typeface and
  oblique typeface.



  The bold typeface is turned off here but not the
  oblique typeface.

CSS

css

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

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

Result

Specifications

Specification
CSS Fonts Module Level 4 # font-synthesis-weight