github/mona-sans

Please provide usage documentation for font feature settings

Saeris opened this issue · 2 comments

Saeris commented

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;

image

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/

image

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!

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