CSS @historical-forms At-Rule

CSS @historical-forms At-Rule

The @historical-forms at-rule is a historical feature-value construct described in the CSS Fonts specification. It is associated with historical letterforms in OpenType fonts, but it is not an interoperable CSS feature. Modern CSS uses the historical-forms keyword of the font-variant-alternates property to request historical glyphs.

@historical-forms Syntax

The CSS Fonts Module Level 4 grammar includes @historical-forms as a possible nested at-rule within @font-feature-values.

@font-feature-values "Example Font" {
  @historical-forms {
    historical-style: 1;
  }
}

This illustrates the historical feature-value declaration structure. It is not supported as a reliable way to activate historical glyphs in browsers.

Unlike named stylistic sets or swashes, historical forms are activated in modern CSS using a predefined keyword rather than a custom feature name.

.historical-text {
  font-variant-alternates: historical-forms;
}

This is the recommended CSS syntax for requesting historical glyph forms.

How Historical Forms Work

Some fonts include alternate glyphs based on older writing styles. These may represent letterforms used in historical manuscripts, early printing, or traditional typography.

When historical forms are enabled, the browser asks the selected font to substitute its historical glyphs for the normal forms of supported characters.

The visual result depends on the font. If the font does not contain historical alternatives, the text generally appears unchanged.

The @historical-forms at-rule itself is not needed for this substitution.

OpenType Historical Forms

OpenType identifies historical character forms using the four-letter feature tag hist.

The font designer determines which characters have historical alternatives. CSS requests the feature but does not create additional glyphs.

Using font-variant-alternates

The font-variant-alternates property provides a readable way to enable historical forms.

.historical-text {
  font-family: "Example Font", serif;
  font-variant-alternates: historical-forms;
}

The browser requests historical glyphs from the selected font. Characters without matching historical forms continue using their available glyphs.

Use normal to disable alternate forms requested through this property.

.normal-text {
  font-variant-alternates: normal;
}

The historical-forms keyword does not require an accompanying @font-feature-values declaration.

Using font-feature-settings

The font-feature-settings property can activate the same OpenType feature directly using its four-letter tag.

.historical-text {
  font-feature-settings: "hist" 1;
}

The value 1 enables the feature. The keyword on can also be used.

.historical-text {
  font-feature-settings: "hist" on;
}

To disable the feature explicitly, use "hist" 0 or "hist" off.

For historical forms, font-variant-alternates: historical-forms is generally preferable because it expresses the intended typography without requiring the OpenType feature tag.

Browser Compatibility

The @historical-forms at-rule is not an interoperable browser feature and should not be used in production stylesheets.

The historical-forms value of font-variant-alternates is part of modern CSS Fonts. Its visual effect depends on the selected font and its supported OpenType features.

For compatibility with older browsers, the font-feature-settings property provides another way to request the hist feature.

.historical-text {
  font-feature-settings: "hist" 1;
  font-variant-alternates: historical-forms;
}

The second declaration uses the higher-level CSS property. The first provides a direct OpenType feature request where the higher-level syntax is unavailable.

@historical-forms Example

The following example compares normal text with historical forms using the supported CSS property rather than the historical at-rule.

<p class="normal-text">Historical Typography</p>
<p class="historical-text">Historical Typography</p>

.normal-text, .historical-text {
  font-family: "Example Font", serif;
  font-size: 28px;
}
.normal-text {
  font-variant-alternates: normal;
}
.historical-text {
  font-variant-alternates: historical-forms;
}

With a font that supports the OpenType hist feature, the second paragraph may display historical letterforms while the first uses normal glyphs.

The font family is a placeholder. A meaningful visual comparison requires a real font containing historical glyph alternatives.

Browser Support

The @historical-forms at-rule does not have established interoperable browser support. Use the historical-forms keyword with font-variant-alternates instead. Check Can I Use? for compatibility information about CSS font variants and OpenType features.

Specifications

The CSS Fonts Module Level 4 specification includes @historical-forms in its feature-value grammar and defines the historical-forms keyword for the font-variant-alternates property. Modern browser documentation describes the keyword rather than a usable standalone at-rule.

CSS Fonts Module Level 4