font-synthesis-small-caps

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-small-caps CSS property lets you specify whether or not the browser may synthesize small-caps typeface when it is missing in a font family. Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.

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

Syntax

css
/* Keyword values */
font-synthesis-small-caps: auto;
font-synthesis-small-caps: none;

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

Values

auto

Indicates that the missing small-caps typeface may be synthesized by the browser if needed.

none

Indicates that the synthesis of the missing small-caps 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-small-caps = 
auto |
none

Examples

Disabling synthesis of small-caps typeface

This example shows turning off synthesis of the small-caps typeface by the browser in the Montserrat font.

HTML

html
<p class="english">
  These are the default <span class="small-caps">small-caps</span>,
  <strong>bold</strong>, and <em>oblique</em> typefaces.
</p>

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

CSS

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

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

Result

Specifications

Specification
CSS Fonts Module Level 4
# font-synthesis-small-caps

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-synthesis-small-caps
auto
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also