Font in browser seem bolder than in the figma?

Might just be my eye for typography but I’m not seeing an obvious difference. Could you make the examples use the same text and background image? Might help

Hey Baffour sharing two images for better visibility of difference in typography.

Ah great that’s a lot clearer! I’m not a massive expert on font files but I know if a certain weight isn’t defined in the font, your browser will try to approximate the weight itself. Is there any chance that’s happening here?

Thanx for helping Baffour.
Sadly No, We have defined that particular weight in the font.

This topic is a bit more complicated than many designers think.

The thing is that every browser engine has its own font renderer that rasterize vector fonts and performs smoothing in a bit different ways. And it also depends on platform-specific algorythms, so that you might get significantly different look in MacOS and Win, for example. More of that, there are user-specific settings on particular machines (e.g. ClearType) that also affect the look of the font. Figma uses it’s own engine to provide consistent cross-platform view for users sharing the same files and it doesn’t always match the view provided by the Chromium engine.

In most cases you won’t get equal view for all platforms and cases. However, some cases can be solved by playing with smoothing params in CSS at the frontend level. This is my typical snippet:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;

Thanks @ Ilya_Ivanov for the answer,
I encountered the same problem, and searched for the smoothing mechanism Figma uses.

It seems like Figma’s engine is doing font smoothing (antialiasing) on the level of the pixel.
Some browsers supports (by default) subpixel smoothing, which gives sharper results and slight bolder font.

Note that switching from subpixel rendering to pixel level anti-aliasing, to make Figma and browser aligned, will create lighter font, which will affect, for example, readability when using light text on dark backgrounds.

to read more about technical browser support

I think Figma is respecting the actual Native font weights?? But yes each browser is going to programmatically handle it differently. I would suggest looking at all font weights by number value in the browser, making a list of the weights on figma and what number value is shown in the inspect tool, then using the font weight in the CSS that looks most similar to the correct weights, rather than going off what it says in the inspect mode on Figma.

You are a life saver <3

Thank you so much. You saved me a lot of time.

Thank you, I needed to adjust and the CSS worked flawlessly.

I think Figma should remove smoothing/antialiasing so it looks more like what it looks like by default in most browsers. ort at least offer the option to toggle this. I find it incredibly frustrating when I set the tone/contrast and size and then it looks different in the browser and I’ve heard from front-end devs they prefer to shy away from adding smoothing/antialisasing to the code. It can make for less contrast and be harder to read which becomes a usability and a11y issue. I’d prefer to just design with what it looks like int he browser.