Question

How does small caps work in Figma with Google Fonts

Forum|Forum|3 years ago
June 2, 2023
8 replies
2141 views

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?

Ask the community

This topic has been closed for replies.

tank666

developer.mozilla.org

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

Leonardo_Ratzlaff

Thanks for the reply, but My problem is applying it to Google Fonts. It doesn’t work.

tank666

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?

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

Leonardo_Ratzlaff

This is what I’m facing. As you can see, it’s faux small caps (uppercase glyphs resized, and therefore thinner and ugly).

Leonardo_Ratzlaff

In Figma, I get the right visual.

tank666

Figma uses a variable font which you can download here:

github.com

Try connecting the font from there instead of from Google Fonts to make sure it works correctly.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank