I’m having trouble matching the font appearance from my Figma design to my HTML/CSS code. The Figma design shows specific text styling, but when I implement it in HTML, it looks different.
Here’s a simplified version of my Figma text properties:
font-family: Montserrat;
font-weight: bold;
font-size: 30px;
color: rgba(255, 255, 255, 0.92);
And here’s my HTML code:
<p style=\"font-family: Montserrat; font-weight: bold; font-size: 30px; color: rgba(255, 255, 255, 0.92);\">Create Account</p>
The text in the browser doesn’t match the Figma design. It’s not as crisp or bold. What could be causing this difference? Am I missing something in my CSS implementation?
Any tips on how to make the HTML text look more like the Figma design would be really helpful. Thanks!
hey, i’ve had this issue before. make sure you’ve actually imported the montserrat font in your css. try adding this to your stylesheet:
@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap’);
that should help match the figma look. also, check if your browser’s rendering the font correctly. sometimes it’s just a browser thing
Font rendering discrepancies between design tools and browsers are common. Beyond importing the font, consider these factors:
-
Font smoothing: Figma may apply different anti-aliasing than your browser.
-
Pixel density: High-DPI screens can affect font appearance.
-
Font-weight variations: ‘bold’ might not match Figma’s exact weight. Try specifying a numeric weight like 700.
-
Browser settings: User’s font settings can override your CSS.
To mitigate these issues, use browser developer tools to fine-tune your CSS. Adjust letter-spacing, line-height, and even text-shadow for closer matching. Remember, pixel-perfect replication across all devices is challenging, so aim for consistency rather than exact duplication.
I’ve dealt with this exact problem in my projects. One thing that often gets overlooked is the font smoothing settings. Figma uses different rendering than most browsers, which can make fonts look crisper.
Try adding this to your CSS:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
This can help sharpen the text. Also, make sure you’re using the exact same font weight as in Figma. Sometimes ‘bold’ isn’t enough - you might need to specify font-weight: 700 or even 800 to match.
Lastly, don’t forget about letter-spacing. Figma often applies subtle letter-spacing that we forget to implement in CSS. Even a small adjustment like letter-spacing: 0.5px can make a big difference in matching the design.
Hope this helps you get closer to that Figma look!
yo, i feel ya on this one. another thing to watch out for is the font file itself. sometimes figma uses a slightly different version of montserrat than what google fonts gives ya. try downloading the exact font file from figma and use @font-face in ur css. that might solve the mystery. good luck!