font-synthesis-style
Baseline 2023Newly 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-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
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
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
This is the default oblique typeface and
bold typeface.
The oblique typeface is turned off here but not the
bold typeface.
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 |