`font-synthesis-position` CSS property

Baseline Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The font-synthesis-position CSS property lets you specify whether or not a browser may synthesize the subscript and superscript "position" typefaces when they are missing in a font family, while using font-variant-position to set the positions.

The font-synthesis-position property has no effect when using the <sup> and <sub> elements.

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

Syntax

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

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

Values

This property is specified as one of the following keyword values:

auto: Indicates that a missing position typeface may be synthesized by the browser if needed.
none: Indicates that the synthesis of a missing position typeface by the browser is not allowed.

Formal definition

Initial value	none
Applies to	all elements and text
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

font-synthesis-position = 
  auto |
  none

Examples

Disabling synthesis of position typeface

This example shows turning off synthesis of the superscript and subscript typefaces by the browser in the Montserrat font.

HTML

<p>
  These are the default position <span class="super">superscript</span>,
  position <span class="sub">subscript</span>, <strong>bold</strong> and
  <em>oblique</em> typefaces.
</p>

<p class="no-syn">
  The positions <span class="super">superscript</span> and
  <span class="sub">subscript</span> typeface is turned off here but not the
  <strong>bold</strong> and <em>oblique</em> typefaces (on browsers that support
  <code>font-synthesis-position</code>).
</p>

CSS

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

* {
  font-family: "Montserrat", sans-serif;
}
.super {
  font-variant-position: super;
}
.sub {
  font-variant-position: sub;
}
.no-syn {
  font-synthesis-position: none;
}

Result

Specifications

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

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`font-synthesis-position`	No	No	118	No	No	No	118	No	No	No	No	No
`auto`	No	No	118	No	No	No	118	No	No	No	No	No
`none`	No	No	118	No	No	No	118	No	No	No	No	No