Please provide usage documentation for font feature settings

[Saeris]

trafficstars

So, I just spent an afternoon digging away at how to get the stylistic alternates for the a and g characters to render in the browser.

Using v1.0.1, first I mocked up a design in Figma, then used their handy VS Code plugin to get it's generated CSS to build out a page. What Figma gave me seemed to match up with CSS I was able to dig up in the Mona Sans microsite: font-feature-settings: "salt" on;

But on my own page, these alternates weren't rendering! After much digging I stumbled upon the solution thanks to this MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide which linked me to a handy tool for extracting OpenType font feature properties: https://wakamaifondue.com/

Turns out the correct CSS I needed was actually font-feature-settings: "ss01" on; instead!

So, I'm filing this issue both to help others who may have run into the same issue and couldn't find an answer, and to ask that official documentation be added for these and any other advanced font features that may require some uncommon CSS to enable.

Thanks for the font! It's pretty awesome!

[mgrn0]

Thanks for pointing this out, this helped me a lot!

[tobiasahlin]

Thank you for pointing this out! We just updated all stylistic sets—we now have eight (this will be added to the readme later today):

Set	Description	Example
ss01	Square diacritical marks (defaults to round)
ss02	Wide uppercase I
ss03	Lowercase l with tail
ss04	Lowercase l with top serif
ss05	Double-storey a
ss06	Double-storey g
ss07	Round G
ss08	Tabular zero with straight bar