Widely availableSupported across all major browsers. Safe to use in production.
Typography Widely available

font-variant-alternates

The font-variant-alternates CSS property, along with the @font-feature-values at-rule, chooses when to use a font's alternate glyphs.

Typography

Overview

The font-variant-alternates CSS property, along with the @font-feature-values at-rule, chooses when to use a font's alternate glyphs.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-alternates
111
111
34
9.1
111
9.3
DOM API
CSSFontFeatureValuesMap
Experimental

The CSSFontFeatureValuesMap interface of the CSS Object Model (CSSOM) represents an iterable and read-only set of the CSSFontFeatureValuesRule properties, such as swash, annotation, ornaments, etc.
111
111
111
@@iterator
Experimental
111
111
111
clear
Experimental

The clear() method of the CSSFontFeatureValuesMap interface removes all declarations in the CSSFontFeatureValuesMap.
111
111
111
delete
Experimental

The delete() method of the CSSFontFeatureValuesMap interface removes the CSS declaration with the given property in the CSSFontFeatureValuesMap.
111
111
111
entries
Experimental

The entries() method of CSSFontFeatureValuesMap instances returns a new map iterator object that contains the [key, value] pairs for each declaration in this CSSFontFeatureValuesMap in insertion order.
111
111
111
forEach
Experimental

The forEach() method of CSSFontFeatureValuesMap instances executes a provided function once per each key/value pair in this map, in insertion order.
111
111
111
get
Experimental

The get() method of the CSSFontFeatureValuesMap interface returns value corresponding to the key in this CSSFontFeatureValuesMap, or undefined if there is none.
111
111
111
has
Experimental

The has() method of the CSSFontFeatureValuesMap interface returns a boolean indicating whether an entry with the specified key exists in this CSSFontFeatureValuesMap or not.
111
111
111
keys
Experimental

The keys() method of CSSFontFeatureValuesMap instances returns a new map iterator object that contains the [key, value] pairs for each declaration in this CSSFontFeatureValuesMap in insertion order.
111
111
111
set
Experimental

The set() method of CSSFontFeatureValuesMap instances adds a new entry with a specified key and value to this CSSFontFeatureValuesMap, or updates an existing entry if the key already exists.
111
111
111
size
Experimental

The size read-only property of the CSSFontFeatureValuesMap interface returns a positive integer containing the size of the CSSFontFeatureValuesMap object.
111
111
111
values
Experimental

The values() method of CSSFontFeatureValuesMap instances returns a new map iterator object that contains the [key, value] pairs for each declaration in this CSSFontFeatureValuesMap in insertion order.
111
111
111
CSSFontFeatureValuesRule

The CSSFontFeatureValuesRule interface represents an @font-feature-values at-rule. The values of its instance properties can be accessed with the CSSFontFeatureValuesMap interface.
134
134
34
16.2
134
16.2
annotation
Experimental

The read-only annotation property of the CSSFontFeatureValuesRule interface contains a CSSFontFeatureValuesMap object representing the user-defined-ident and feature index for a variable font which supports font-variant-alternates.
111
111
111
characterVariant
Experimental

The read-only characterVariant property of the CSSFontFeatureValuesRule interface contains a CSSFontFeatureValuesMap object representing the user-defined-ident and feature index for a variable font which supports font-variant-alternates.
111
111
111
fontFamily

The fontFamily property of the CSSFontFeatureValuesRule interface represents the name of the font family it applies to.
111
111
34
16.2
111
16.2
ornaments
Experimental

The read-only ornaments property of the CSSFontFeatureValuesRule interface contains a CSSFontFeatureValuesMap object representing the user-defined-ident and feature index for a variable font which supports font-variant-alternates.
111
111
111
styleset
Experimental

The read-only styleset property of the CSSFontFeatureValuesRule interface contains a CSSFontFeatureValuesMap object representing the user-defined-ident and feature index for a variable font which supports font-variant-alternates.
111
111
111
stylistic
Experimental

The read-only stylistic property of the CSSFontFeatureValuesRule interface contains a CSSFontFeatureValuesMap object representing the user-defined-ident and feature index for a variable font which supports font-variant-alternates.
111
111
111
swash
Experimental

The read-only swash property of the CSSFontFeatureValuesRule interface contains a CSSFontFeatureValuesMap object representing the developer-provided name and feature index for a variable font which supports font-variant-alternates.
111
111
111
Other
css.at-rules.font-feature-values

The @font-feature-values CSS at-rule lets you use a common name in the font-variant-alternates property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts.
111
111
34
9.1
111
9.3
CSS at-rule
annotation

`@annotation`
111
111
34
9.1
111
9.3
character-variant

`@character-variant`
111
111
34
9.1
111
9.3
historical-forms

`@historical-forms`
111
111
34
9.1
111
9.3
ornaments

`@ornaments`
111
111
34
9.1
111
9.3
styleset

`@styleset`
111
111
34
9.1
111
9.3
stylistic

`@stylistic`
111
111
34
9.1
111
9.3
swash

`@swash`
111
111
34
9.1
111
9.3
CSS property
annotation

`annotation()`
111
111
34
16.2
111
16.2
character variant

`character-variant()`
111
111
34
16.2
111
16.2
historical-forms
111
111
34
9.1
111
9.3
normal
111
111
34
9.1
111
9.3
ornaments

`ornaments()`
111
111
34
16.2
111
16.2
styleset

`styleset()`
111
111
34
16.2
111
16.2
stylistic

`stylistic()`
111
111
34
16.2
111
16.2
swash

`swash()`
111
111
34
16.2
111
16.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (134)
Implementation note
  • Not exposed on `Window`. See bug 385925149.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (134)
Implementation note
  • Not exposed on `Window`. See bug 385925149.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (134)
Implementation note
  • Not exposed on `Window`. See bug 385925149.

Syntax

CSS 
@font-feature-values "MyFont" {
  @styleset {
    fancy: 1;
  }
  @swash {
    elegant: 1;
  }
}

.decorative {
  font-family: "MyFont";
  font-variant-alternates: styleset(fancy) swash(elegant);
}

Live demo

Normalglyph

font-variant-alternates Normalglyph demo.

PreviewFullscreen

alternativeglyphconcept

font-variant-alternates alternativeglyphconcept demo.

PreviewFullscreen

swashconcept

font-variant-alternates swashconcept demo.

PreviewFullscreen

Use cases

  • Using font-variant-alternates

    The font-variant-alternates CSS property, along with the @font-feature-values at-rule, chooses when to use a font's alternate glyphs.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features