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


  These are the default position superscript,
  position subscript, bold and
  oblique typefaces.



  The positions superscript and
  subscript typeface is turned off here but not the
  bold and oblique typefaces (on browsers that support
  font-synthesis-position).

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