font-synthesis-style

The font-synthesis-style CSS property lets you specify whether or not the browser may synthesize the oblique 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-style: auto;
font-synthesis-style: none;

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

Values

auto

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

none

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

Formal definition

Initial valueauto
Applies toall elements and text. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

font-synthesis-style = 
  auto  |
  none

Examples

Disabling synthesis of oblique typeface

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

HTML

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

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

Specifications

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

Browser compatibility

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
font-synthesis-style
auto
none

See also