Skip to main content
Question

How does small caps work in Figma with Google Fonts


Leonardo_Ratzlaff1

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?

7 replies

tank666
  • 4858 replies
  • June 2, 2023

Leonardo_Ratzlaff

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


tank666
  • 4858 replies
  • June 2, 2023

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?


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

image
In Figma, I get the right visual.


tank666
  • 4858 replies
  • June 5, 2023

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.


Leonardo_Ratzlaff

Oh, that will definitely solve the issue. I didn’t know it was an option.
Thank you so much, @tank666!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings