User-defined glyph alternates

font-variant-alternates

Choose a glyph alternate from a font file using a matching user-defined name from an @font-feature-values declaration.

Swash

To use swash glyphs which a type designer has tagged with swsh or cswh, define an @swash rule and use it in a CSS selector declaration like so, where flourishingP is an arbitrary name pointing to the first swash glyph in the font file:

@font-feature-values "Talk Like a Pirate" {
@swash { flourishingP: 1; }
}
span#flourishingP {
font-family: "Talk Like a Pirate", fantasy;
font-variant-alternates: swash(flourishingP);
}
swash

Annotation

To use annotation glyphs, like circled numbers or inverted letters, which a type designer has tagged with nalt, define an @annotation rule and use it in a CSS selector declaration like so, where circledB is an arbitrary name pointing to the second annotation glyph in the font file:

@font-feature-values "Circus Negra" {
@annotation { circledB: 2; }
}
span#circledB {
font-family: "Circus Negra", monospace;
font-variant-alternates: annotation(circledB);
}
annotation

Ornaments

To use ornamental glyphs, like fleurons or dingbats, which a type designer has tagged with ornm, define an @ornaments rule and use it in a CSS selector declaration like so, where rightFleuron is an arbitrary name pointing to the third ornament glyph in the font file:

@font-feature-values "Flowers not to Reason Why" {
@ornaments { rightFleuron: 3; }
}
span#rightFleuron {
font-family: "Flowers not to Reason Why", cursive;
font-variant-alternates: ornaments(rightFleuron);
}
ornaments

Stylistic

To use alternate stylistic glyphs, which a type designer has tagged with salt, define an @stylistic rule and use it in a CSS selector declaration like so, where longTailedQ is an arbitrary name pointing to the fourth stylistic glyph in the font file:

@font-feature-values "Wedding Belles" {
@stylistic { longTailedQ: 4; }
}
span#longTailedQ {
font-family: "Wedding Belles", cursive;
font-variant-alternates: stylistic(longTailedQ);
}
stylistic

style > glyph > font-variant-alternatesUser-defined glyph alternates

🔎