Nunito font not rendering correctly, how to fix?

Question

css

Hello.
1. Letter spacing There was an issue with Nunito font rendering in browsers compared to Figma: the font is narrower when displayed in the browser. This is a screenshot from the rendered page (browser above, figma below) enter image description here
This is from Google Fonts (browser above, figma below).

The situation is similar, i.e. The problem is not the incorrect connection of the font.


Displaying odd sizes There is also a problem when displaying a font with an odd size, for example 13px, pay attention to the letters “k” and “l”, the ends are cut off. Screenshot from layout


Screenshot from Google fonts


How can I remove these glitches? Thanks

Answer 1

You can try to clear the font cache and generally run some cleaning of everything on the computer. If Mac, then OnyX helps a lot, after a reboot, the vast majority of such visual glitches disappear. Alas, but Figma is not going smoothly with the rendering of fonts, especially those pulled up with Google Fonts. Therefore, I am always wary of this kind of action and prefer headsets that are proven and work reliably. Nunito is not included in their list, somehow they didn’t like him right away, some kind of crooked.