Matching fonts with Figma

When I joined Clazar, I noticed that the fonts in our web application looked bolder than on Figma. The font weights and all other config was same as in Figma but, it looked different. The font looked bolder than on Figma.

old_figma_vs_web_app

Because I knew Figma is also a web app, I had a hunch that Figma might have anti-aliasing enabled and we had not. This was actually true when I tried it out. Just adding this line fixed the font rendering issue:

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

fixed_figma_vs_web_app

A curious case of Leaky Abstraction!