Skip to main content

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.

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:


Figma Google comparison


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.

Thanks for the information @Rafastesia ! 🙂


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

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


Terms & ConditionsCookie settings