Using fonts like Source Sans Pro or Signika from Google Fonts in Figma gives you the ability to use small caps (among other OTF features).
But in code, small caps don’t work (the browser renders faux small caps).
How does Figma makes it work, and how can I make it work on my code?
Thanks for the reply, but My problem is applying it to Google Fonts. It doesn’t work.
I have tested the above fonts and it works.
Could you share the result of what you see when you apply font-variant-caps: small-caps?
This is what I’m facing. As you can see, it’s faux small caps (uppercase glyphs resized, and therefore thinner and ugly).
In Figma, I get the right visual.
Figma uses a variable font which you can download here:
In addition, you can also download web fonts from this same repository:
Try connecting the font from there instead of from Google Fonts to make sure it works correctly.
Oh, that will definitely solve the issue. I didn’t know it was an option.
Thank you so much, @tank666!