CSS @font-feature-values Rule

CSS @font-feature-values Rule 

The @font-feature-values rule in CSS allows you to define custom names for OpenType features in a font, making it easier to enable and control them using font-variant or font-feature-settings.

1. Syntax

@font-feature-values "Font Name" {
  @swash {
    fancy: 1;
  }
  @styleset {
    alt-style: 3;
  }
}

2. How It Works

• This rule is only useful for OpenType fonts that support advanced features.
• It assigns custom names (e.g., fancy, alt-style) to OpenType feature settings.
• You can then use font-variant or font-feature-settings to activate these features.

3. Example Usage

A. Defining Feature Values

@font-feature-values "Playfair Display" {
  @swash {
    fancy: 1;
  }
  @styleset {
    alt-style: 3;
  }
}

B. Applying Features in CSS

p {
  font-family: "Playfair Display", serif;
  font-variant-alternates: swash(fancy);
  font-variant-alternates: styleset(alt-style);
}

✅ This enables the swash and alternate style set.

4. Available Feature Categories

Feature Type	Used For
@swash	Swashes (fancy extended strokes)
@styleset	Alternative character sets
@character-variant	Specific character variations
@historical-forms	Old-style typography
@ornaments	Special ornament glyphs
@annotation	Special marks or symbols

5. When to Use @font-feature-values?

• When working with OpenType fonts that have custom stylistic features.
• To make feature activation more readable and manageable.
• Useful for high-end typography in branding, logos, and editorial design.

6. Browser Support

🔹 Limited support – Works in Firefox and partially in Safari.
🔹 Alternative: Use font-feature-settings directly:

p {
  font-feature-settings: "swsh" 1;
}