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?