CSS @swash At-Rule

CSS @swash At-Rule

The @swash at-rule defines a name for an OpenType swash glyph index inside @font-feature-values. The swash() function of font-variant-alternates activates the named alternative.

@swash Syntax

@font-feature-values "Example Font" {
  @swash {
    flourish: 1;
  }
}
.heading {
  font-family: "Example Font", serif;
  font-variant-alternates: swash(flourish);
}

Inside @font-feature-values, @swash maps a name to an OpenType swash index. The name can then be selected through font-variant-alternates.

How @swash Works

Swash forms are decorative alternatives supplied by a font. They may not exist for every character, so check readability and do not rely on them to communicate meaning.

The @swash at-rule defines a name for an OpenType swash glyph index inside @font-feature-values. The swash() function of font-variant-alternates activates the named alternative.

The @swash descriptor block is nested inside @font-feature-values and maps a name to an OpenType swash alternate index.

OpenType Support

Swash alternatives depend on the OpenType swsh and cswh features provided by the font.

Apply the named alternate with font-variant-alternates: swash(name). Swash glyphs are decorative forms provided by a font; CSS cannot invent them.

Single Index

Each named swash value takes one positive integer.

Typography and Readability

Swashes are decorative glyph substitutions. Use them selectively in headings or short phrases rather than long body text.

@swash Example

Check browser support and test the example in a compatible browser. For font-feature examples, the selected font must contain the requested OpenType feature.

HTML

<h2 class="heading">Sample typography</h2>

CSS

@font-feature-values "Example Font" {
  @swash {
    flourish: 1;
  }
}
.heading {
  font-family: "Example Font", serif;
  font-variant-alternates: swash(flourish);
}

Note: "Example Font" is a placeholder. Replace it with an actual OpenType font containing the relevant alternate glyphs.

Browser Support

Support varies by feature and browser version. For current compatibility, consult Can I Use? and search for the relevant feature.

Use decorative swashes sparingly in headings or short labels. Confirm readability and provide normal glyphs when the font or feature is unsupported.

Specifications

This feature is described in CSS Fonts Module Level 4.

CSS Fonts Module Level 4