Discrepancy between Figma and web font appearance

Other Questions Figma
1

I’m stuck with a weird issue. I’m using the ‘Roboto’ font in my project. The design looks perfect in Figma but when I implement it on the web it’s off. The font seems thicker or fuzzy somehow. I can’t put my finger on it.

I’ve made sure to use the exact same font weight and size from Figma. Here’s what I’ve done in my CSS:

@font-face {
  font-family: 'Roboto';
  src: url(fonts/Roboto-Light.ttf) format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto';
  src: url(fonts/Roboto-Regular.ttf) format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url(fonts/Roboto-Medium.ttf) format('truetype');
  font-weight: 500;
}

body {
  font-family: 'Roboto', sans-serif;
}

Has anyone run into this before? Any ideas on how to make the web version match Figma more closely? I’m out of ideas and it’s driving me nuts!

2

hey, i’ve seen this before. try using woff2 format instead of ttf. it usually renders better on web. also, check ur font-smoothing settings. sometimes adding this helps:

body {
-webkit-font-smoothing: antialiased;
}

if nothing works, maybe try a different font? some just look better on web than others.

3

I’ve run into this issue before, and it can be maddening. One thing that helped me was playing around with the font-weight. Sometimes, what looks like 400 in Figma might need to be 300 or even 350 on the web to match visually.

Another trick I found useful was adjusting the line-height. Even a small change can make the text appear crisper and more similar to the Figma design.

Have you considered using a font loader like Web Font Loader? It gives you more control over how fonts are loaded and rendered, which might help with the fuzziness you’re seeing.

Lastly, don’t forget about sub-pixel rendering. Different operating systems handle this differently, which can affect how fonts appear. You might need to tweak your designs slightly for different platforms to achieve a consistent look.

4

I’ve encountered this issue before, and it can be frustrating. One thing to consider is that Figma and web browsers render fonts differently. Figma uses its own rendering engine, while browsers use the system’s font rendering.

A few things you can try:

  1. Use web fonts instead of local files. Google Fonts provides Roboto, which might render more consistently across platforms.

  2. Adjust the font-smoothing properties in your CSS. Try adding:

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

  1. Check your browser’s font settings. Some browsers allow users to customize font rendering, which could affect how Roboto appears.

  2. Consider using a slightly different font weight in your web implementation to compensate for the rendering differences.

Remember, pixel-perfect matching between design tools and browsers is often challenging. Focus on maintaining the overall design intent rather than an exact match.

5

I’ve dealt with this frustration before. One often overlooked factor is screen resolution and pixel density. Figma might be displaying the font at a higher resolution than your web browser, causing the discrepancy.

Try adjusting the font-size slightly or experiment with letter-spacing. Sometimes, a minor tweak can make a significant difference. Also, ensure you’re testing on multiple devices and browsers, as rendering can vary.

Another approach is to use SVG text for critical headings or logos. This preserves the exact appearance across platforms, though it’s not practical for body text.

Lastly, consider using a font-display property in your @font-face rules. This can help manage how the font is displayed during loading, potentially reducing the visual shift you’re experiencing.