I’m facing an issue where the Gilroy-Bold font shows different appearances in my design tool Figma and my React application, although they should be using the same font source. I’m implementing the font like this:
I’ve ensured the file path is accurate according to my editor’s suggestions. I’ve also attempted various fixes such as clearing the cache, using an incognito window, and restarting both my development server and editor. The font seems to load, but it doesn’t match what I see in Figma. Has anyone else dealt with similar discrepancies?
Browsers and Figma handle font metrics differently. Check your line-height settings - browsers use default values that don’t match Figma’s spacing. I had this exact issue with Gilroy and fixed it by setting line-height to 1 or 1.2. Also make sure you’re using the same font file in both places. Designers sometimes grab fonts from different sources or versions, which messes with spacing and weight even if the names look identical.
totally get ur frustration! Figma does have its quirks with fonts. adding font-display: swap; is a great start! also make sure that the font weight in figma mirrors your css. small changes in styling can throw off the appearance for sure.
Had this exact problem last year with a custom font. Figma renders fonts differently than browsers - antialiasing and subpixel rendering are the culprits. Add -webkit-font-smoothing: antialiased; and -moz-osx-font-smoothing: grayscale; to your CSS. Also try switching from TTF to WOFF2 if you haven’t already - made a huge difference for me. Double-check that Figma’s using the same font weight as your CSS too. Designers often install multiple weights of the same family, which creates visual differences even with identical source files.