Turning them on
Use the font-variant property where CSS has one, and font-feature-settings with the four-letter tag for the rest.
.price { font-variant-numeric: tabular-nums; }
.legal { font-variant-caps: small-caps; }
.code { font-feature-settings: "dlig"; }
Common tags
| Tag | Name | CSS |
|---|---|---|
| tnum | Tabular figures | font-variant-numeric: tabular-nums |
| frac | Fractions | font-variant-numeric: diagonal-fractions |
| smcp | Small capitals | font-variant-caps: small-caps |
| case | Case-sensitive forms | font-feature-settings: "case" |
| zero | Slashed zero | font-variant-numeric: slashed-zero |
| ss01 to ss20 | Stylistic sets | font-feature-settings: "ss01" |
| cv01 to cv99 | Character variants | font-feature-settings: "cv01" |
| dlig | Discretionary ligatures | font-variant-ligatures: discretionary-ligatures |
Katagami's features
Katagami Sans has 41 features you can switch. The features page shows every one off and on in each member.