font-synthesis-position

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-positionCSS 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

css

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

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. It also applies to `::first-letter` and `::first-line`.
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

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

css

@import url("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