Complete Guide to OpenType Features

What Are OpenType Features?

Ligatures

/* Enable standard ligatures (usually on by default) */
.with-ligatures {
  font-feature-settings: "liga" 1;
  /* Or use modern property: */
  font-variant-ligatures: common-ligatures;
}

/* Disable ligatures */
.no-ligatures {
  font-feature-settings: "liga" 0;
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-feature-settings: "dlig" 1;
  font-variant-ligatures: discretionary-ligatures;
}

/* Combine with standard ligatures */
.all-ligatures {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

Contextual Alternates

/* Enable contextual alternates (usually on by default) */
.contextual {
  font-feature-settings: "calt" 1;
  font-variant-ligatures: contextual;
}

/* Disable if causing issues */
.no-contextual {
  font-feature-settings: "calt" 0;
  font-variant-ligatures: no-contextual;
}

Stylistic Sets and Alternates

/* Enable specific stylistic set */
.stylistic-set-1 {
  font-feature-settings: "ss01" 1;
}

/* Combine multiple sets */
.multiple-sets {
  font-feature-settings: "ss01" 1, "ss03" 1, "ss05" 1;
}

/* Modern CSS (limited browser support) */
.modern-syntax {
  font-variant-alternates: styleset(ss01, ss03);
}

.stylistic-alternates {
  font-feature-settings: "salt" 1;
  font-variant-alternates: stylistic(salt);
}

/* Enable specific character variant */
.char-variant {
  font-feature-settings: "cv01" 1, "cv05" 1;
}

Case-Sensitive Forms

/* Apply to all-caps text */
.all-caps {
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}

/* Use with small-caps */
.small-caps {
  font-variant-caps: small-caps;
  font-feature-settings: "case" 1;
}

.small-caps {
  font-feature-settings: "smcp" 1;
  /* Or use modern property: */
  font-variant-caps: small-caps;
}

.all-small-caps {
  font-feature-settings: "smcp" 1, "c2sc" 1;
  /* Or: */
  font-variant-caps: all-small-caps;
}

Number Styles and Fractions

/* Oldstyle figures for body text */
.body-text {
  font-feature-settings: "onum" 1;
  font-variant-numeric: oldstyle-nums;
}

/* Lining figures for tables */
.tabular-data {
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

/* Tabular figures for tables and timers */
.data-table {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Combine oldstyle + tabular */
.elegant-data {
  font-variant-numeric: oldstyle-nums tabular-nums;
}

.fractions {
  font-feature-settings: "frac" 1;
  font-variant-numeric: diagonal-fractions;
}

/* Stacked fractions (afrc) - vertical layout */
.stacked-fractions {
  font-feature-settings: "afrc" 1;
  font-variant-numeric: stacked-fractions;
}

Decorative Features

.title-text {
  font-feature-settings: "titl" 1;
  font-size: 4rem;
}

CSS Implementation

/* Ligatures */
font-variant-ligatures: common-ligatures discretionary-ligatures;

/* Numeric styles */
font-variant-numeric: oldstyle-nums tabular-nums diagonal-fractions;

/* Capitals */
font-variant-caps: small-caps;

/* Position */
font-variant-position: super;  /* or sub */

/* East Asian */
font-variant-east-asian: jis04;

/* Enable single feature */
font-feature-settings: "swsh" 1;

/* Multiple features */
font-feature-settings: "liga" 1, "dlig" 1, "swsh" 1;

/* Disable feature */
font-feature-settings: "liga" 0;

/* Numeric values for features with multiple levels */
font-feature-settings: "ss01" 1, "ss02" 1;

.body-text {
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

.heading {
  font-feature-settings: "liga" 1, "dlig" 1, "swsh" 1, "titl" 1;
}

.data-table {
  font-variant-numeric: lining-nums tabular-nums;
  font-variant-ligatures: no-common-ligatures;
}

code, pre {
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
}

/* Feature query for browser support */
@supports (font-variant-numeric: oldstyle-nums) {
  .body-text {
    font-variant-numeric: oldstyle-nums;
  }
}

/* Fallback for older browsers */
@supports not (font-variant-numeric: oldstyle-nums) {
  .body-text {
    font-feature-settings: "onum" 1;
  }
}

GSUB: Glyph Substitution

The GSUB table handles features that replace one glyph (or sequence) with another. When you type "fi" and it becomes a single ligature character, that's GSUB at work.

GSUB lookups are applied in a specific order determined by the font's feature definitions and the text engine's lookup ordering rules. When shaping text, the engine applies required features first (like ccmp for precomposed glyph sequences), then default-on features (calt, liga, kern), and finally user-activated features (smcp, dlig, ss01). The order matters because substitutions are cumulative: a calt feature that replaces a standard "g" with an alternate form changes the glyph ID in the sequence, and any subsequent smcp lookup must reference the alternate g's small-cap variant rather than the standard g small-cap to produce the correct result. Fonts that define stylistic alternates for every feature combination require more GSUB rules but produce more predictable results when features are combined.

Script and language tags in GSUB determine which lookups are active for specific writing systems. These tables are a core part of the overall structure described in the font file anatomy guide. The GSUB table organizes features under a ScriptList and LanguageSystem hierarchy, allowing different feature behavior per language. A font might enable different ligature sets for Turkish (which requires special handling of dotted and dotless i to avoid ambiguity) versus standard Latin. The OpenType Feature Registry maintained by Microsoft defines registered four-letter feature tags with standardized semantics such as liga, smcp, and kern, while fonts can also define unregistered proprietary tags for custom behavior that foundries must document separately.

GPOS: Glyph Positioning

The GPOS table handles features that adjust glyph positions without replacing them. Kerning is the most common example, but GPOS also handles accent placement and complex script positioning.

Enabling Features in CSS

/* Modern approach: font-variant properties */
.typography {
  /* Ligatures */
  font-variant-ligatures: common-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Caps */
  font-variant-caps: small-caps;
  font-variant-caps: all-small-caps;

  /* Numbers */
  font-variant-numeric: oldstyle-nums;
  font-variant-numeric: tabular-nums;
}

/* Legacy/advanced: font-feature-settings */
.advanced {
  font-feature-settings:
    'liga' 1,    /* Standard ligatures */
    'dlig' 1,    /* Discretionary ligatures */
    'smcp' 1,    /* Small caps */
    'ss01' 1,    /* Stylistic set 1 */
    'kern' 1;    /* Kerning */
}

/* Feature reference by tag */
.specific {
  font-feature-settings: 'salt' 1;  /* All alternates */
  font-feature-settings: 'cv01' 1;  /* Character variant 1 */
}

Feature Preservation in Conversion

OpenType features are stored in GSUB and GPOS tables, which are preserved during TTF, OTF, WOFF, and WOFF2 conversion. The tables are compressed but not modified. Variable fonts introduce additional feature considerations because axis-based variation can interact with GSUB substitutions; the variable fonts implementation guide covers these interactions and how to use them effectively in CSS.

# Preserve all layout features when subsetting
pyftsubset font.ttf \
  --unicodes="U+0000-00FF" \
  --layout-features='*' \    # Keep all GSUB/GPOS features
  --output-file=font-subset.ttf

# Or preserve specific features
pyftsubset font.ttf \
  --unicodes="U+0000-00FF" \
  --layout-features='kern,liga,smcp' \
  --output-file=font-subset.ttf

Discovering what features a font supports before writing CSS to activate them is straightforward with modern inspection tools. Our font analyzer lists all OpenType features present in an uploaded font, making it easy to know exactly which feature tags to activate before writing any CSS. Wakamai Fondue (wakamaifondue.com) is another option that accepts a dropped font file and lists every OpenType feature, showing sample text demonstrating each feature's effect and generating the CSS needed to activate it. The Chrome DevTools Font panel (accessible via Elements → Computed → Rendered Fonts) shows which font is rendering text on any element and indicates which features are active. For programmatic inspection, fontTools provides complete feature access: iterating over font['GSUB'].table.FeatureList.FeatureRecord returns all available feature tags with their associated lookup indices. This inspection step prevents writing CSS for features the font does not actually contain.

Feature preservation during conversion is reliable for WOFF and WOFF2 conversions because those formats are compression wrappers that do not modify table content. The GSUB and GPOS tables pass through intact. The risk arises specifically during subsetting: pyftsubset defaults to removing all OpenType layout features unless given explicit instructions to keep them. For a Latin-only subset, --layout-features='kern,liga,calt' preserves the most commonly activated features while discarding script-specific tables irrelevant to the subset. Feature loss during subsetting is silent. The subset font loads and renders correctly, but the CSS feature activation that worked with the full font has no visible effect, and the missing functionality may not be noticed until users report unexpected text appearance in premium typographic contexts.