I am using the same font that is using in figma file but why it looks different than figma file

[Rajg8199]

I have used the same font but still it looks different in shopify ? why so ?I have attached the figma file as well as the shopify custom code  below : 

[DaisyVo]

Hi @Rajg8199 

Please share with me your store URL so I can check it further?

Best,

Daisy

[Rajg8199]

https://u5e6wjglieaicben-75955994964.shopifypreview.com

[websensepro]

Hi@Rajg8199 

The issue where the font looks different in Shopify compared to Figma can happen for a few reasons. Here's what might be going on and how you can fix it:

---

1. Font Weight Doesn't Match

In your code, you've set the font-weight to 500. However, in Figma, the weight might be set to something like 400 (Regular) or 700 (Bold). This mismatch can make the font appear slightly different.

Fix: Double-check the font weight used in Figma and update your code to match:

font-weight: 400; /* Regular */  

Or if Figma is using Bold:

font-weight: 700;

---

2. Font Rendering Differences

Fonts often look different in design tools like Figma compared to browsers because of how they handle font smoothing and anti-aliasing. For example:

• Browsers might render fonts differently based on the operating system (Windows vs macOS).
• Subtle differences in text rendering can make fonts look thinner or bolder.

Fix: Add this CSS to improve font rendering in Shopify:

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

---

3. Incorrect Font File Loading

You’ve included multiple font formats (eot, woff, woff2, ttf, svg) in your @font-face, but browsers always pick one. If the woff2 file isn’t the same version as the font in Figma, you’ll see a difference.

Fix: Make sure the font files you’re using in Shopify are the exact same ones from Figma. Also, test using only the woff2 format (modern browsers prefer it):

src: url('AutautGrotesk-Medium.woff2') format('woff2');

---

4. Fallback Fonts Are Being Used

If the custom font doesn’t load correctly for any reason, browsers will fall back to system fonts like Arial or Helvetica, which look completely different.

Fix:

1. Open your Shopify store.
2. Use the browser developer tools (Inspect Element) and check the computed font-family.
3. If it shows a fallback font instead of "Autaut Grotesk," there might be an issue with the font file path.

---

5. Missing Font Variants

If Figma uses Bold, Italic, or Semi-Bold styles, but you’ve only loaded one variant (Medium), the font will look off.

Fix: Load all the necessary font weights and styles. For example:

@font-face {
    font-family: 'Autaut Grotesk';
    src: url('AutautGrotesk-Bold.woff2') format('woff2');
    font-weight: 700; /* Bold */
    font-style: normal;
}

---

6. CSS Conflicts or Overrides

Sometimes, Shopify themes or other custom CSS might override your font settings, even if you’ve loaded them correctly.

Fix: Add a more specific selector or !important (only if absolutely necessary):

body {
    font-family: 'Autaut Grotesk', sans-serif !important;
}

---

What to Do Next:

1. Verify the font weight in Figma.
2. Ensure you're using the correct font file (especially woff2).
3. Add -webkit-font-smoothing to improve how the font looks.
4. Use developer tools to check if the font is loading correctly in Shopify.

Let me know if you need help inspecting your code further! We can go step by step to get it fixed. 

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!