Skip to main content
Question

Does Roboto have different weights in Figma and in Google fonts?

  • February 23, 2024
  • 4 replies
  • 2476 views

Sofia_Hanashiro

In my Figma project, I’ve selected Roboto as the font. However, upon transferring the project to the developer, an issue arose. He noticed that Google Fonts does not offer the semi-bold (600 weight) variant of Roboto—a version that is available and used in Figma. To investigate further, the developer conducted a test by overlaying text in Roboto with a weight of 600 over text in Roboto with a weight of 700, using Google Fonts. Surprisingly, there was no discernible difference between the two.

4 replies

tank666
  • 4858 replies
  • February 23, 2024

Rafastesia

Hi, Sofia! The same thing happened to me in a project where I’m using Roboto as the main font for titles and paragraphs. After searching, I’ve found this comparison that maybe is useful for you:

The reason why fonts are shown the same at 600 and 700 in your developer’s test is because it automatically chooses the closest available weight when yours is unavailable. As @tank666 said, Figma uses Roboto Variable font as a standard, but there is a solution that could work for you, which is using a version called Roboto Flex both in Figma and in your Google Fonts. Your developer can control weights of that version of Roboto via CSS and match it perfectly with Figma’s. Here’s a demonstration.

Other solution would be downloading the variable font and not using the one’s at Google Fonts.

Also, keep in mind fonts are rasterized differently depending on the browser you are using. For example, until we discovered this problem you are facing now, we were struggling with Roboto Light, which was OK in Firefox and very illegible in Chrome.

Hope this helps.


Sofia_Hanashiro

Thanks for the information @Rafastesia ! 🙂

And would you know how to download a Figma font? I’ve searched in Figma but didn’t succeed.


Rafastesia

You’re welcome! As far as I know, is not possible to download a font from Figma, so you have to find it by yourself. About Roboto variable font, which is the version used in Figma, @tank666 answered you with a link. Good luck!


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