Font appears differently on web compared to Figma

I’m encountering a discrepancy with the Gilroy-Bold font in my React app compared to how it looks in Figma. Even though I’m using the same font file for both, the appearance varies quite a bit. In Figma, it looks great, but in my web application, it looks bulkier and the spacing seems off. Here’s how I am including the font:

@font-face {
  font-family: 'Gilroy-Bold';
  src: url('/src/Gilroy/Gilroy-Bold.ttf');
}

.PPNameHeader {
  color: #444BAB;
  margin: 0;
  margin-left: 6%;
  font-size: 1.173rem;
  font-family: 'Gilroy-Bold';
}

I’ve verified the file path is correct and even tried applying this font globally in my CSS:

* {
  font-family: 'Gilroy-Bold';
  src: url('/src/Gilroy/Gilroy-Bold.ttf');
}

I’ve also cleared my browser cache, used an incognito window, and restarted both my development server and editor to see if that helps. The font appears, but it just doesn’t have the same look as in Figma. What could be causing this version difference?

This inconsistency happens because browsers apply their own font rendering algorithms that differ from Figma’s rendering engine. The bulkier appearance suggests your browser might be applying synthetic bolding on top of the already bold font. Try setting font-weight: normal instead of relying on the font name to handle the boldness. Also, browsers often have different anti-aliasing settings - you can control this with -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale. Another factor could be that Figma uses different baseline metrics than web browsers. I’ve found that adding text-rendering: optimizeLegibility sometimes helps match the designer’s intent more closely.

yep, its really common for fonts 2 look diffrent in browsers vs design tools like figma. maybe try adding font-weight: bold and font-display: swap in your @font-face. also, check if ur loading multiple weights, cause that can mess things up too!