W3cubDocs

/CSS

font-variant-alternates

The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.

/* Keyword values */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* Functional notation values */
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* Global values */
font-variant-alternates: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;

The @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with OpenType parameters. This property allows those human-readable names (defined in @font-feature-values) in the stylesheet.

Syntax

This property may take one of two forms:

  • either the keyword normal
  • or one or more of the other keywords and functions listed below, space-separated, in any order.

Values

normal

This keyword deactivates alternate glyphs.

historical-forms

This keyword enables historical forms — glyphs that were common in the past but not today. It corresponds to the OpenType value hist.

stylistic()

This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value salt, like salt 2.

styleset()

This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ssXY, like ss02.

character-variant()

This function enables specific stylistic alternatives for characters. It is similar to styleset(), but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value cvXY, like cv02.

swash()

This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values swsh and cswh, like swsh 2 and cswh 2.

ornaments()

This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ornm, like ornm 2.

Note: In order to preserve text semantics, font designers should include ornaments that don't match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Be aware that some existing fonts don't follow this advice.

annotation()

This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value nalt, like nalt 2.

Formal definition

Initial value normal
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited yes
Computed value as specified
Animation type discrete

Formal syntax

font-variant-alternates = 
normal |
[ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]

<feature-value-name> =
<ident>

Examples

Enabling swash glyphs

HTML

<p>A Fancy Swash</p>
<p class="variant">A Fancy Swash</p>

CSS

@font-face {
  font-family: MonteCarlo;
  src: url(MonteCarlo-Regular.ttf);
}

@font-feature-values "MonteCarlo" {
  @swash {
    fancy: 1;
  }
}

p {
  font-family: "MonteCarlo";
  font-size: 1.5rem;
}

.variant {
  font-feature-settings: "swsh" 1;
  font-variant-alternates: swash(fancy);
}

Note: For this example to work you need to load the MonteCarlo font which is licensed under the SIL Open Font License Version 1.1. Download at https://github.com/googlefonts/monte-carlo.

More fonts are available in the Google Font corpus. However, note that fonts loaded from Google Fonts directly (for example, using @import url("https://fonts.googleapis.com/css2?family=MonteCarlo");) won't work. Google Fonts hosted fonts seem to strip the swash feature.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
font-variant-alternates
NoSee bug 716567.
NoSee bug 716567.
34 No
NoSee bug 716567.
9.1
NoSee bug 716567.
NoSee bug 716567.
34
NoSee bug 716567.
9.3
NoSee bug 716567.
annotation No No 34 No No 16.2 No No 34 No 16.2 No
character_variant No No 34 No No 16.2 No No 34 No 16.2 No
ornaments No No 34 No No 16.2 No No 34 No 16.2 No
styleset No No 34 No No 16.2 No No 34 No 16.2 No
stylistic No No 34 No No 16.2 No No 34 No 16.2 No
swash No No 34 No No 16.2 No No 34 No 16.2 No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates