Variables font is not working in Shopify

Shopify Discussion

Topic summary

Issue: A variable font in a Shopify store defaulted to the “thin” style, and changing font weight wasn’t working.

Guidance provided:

  • Edit theme CSS: Online Store > Themes > Actions > Edit Code.
  • In Assets, open the main CSS file and add custom CSS to set the desired font-weight.
  • Save and preview changes.
  • Troubleshoot by verifying the uploaded variable font actually supports the target weights (e.g., 400, 700) per the font’s documentation.

Key context: Variable fonts bundle multiple styles (italic, bold, etc.) into one file and require correct CSS and supported weight ranges to display properly.

Outcome: Resolved. The user extracted a specific font file (separate weight) from the variable font file, which fixed the weight issue.

Status: Closed/resolved. No further questions.

Notes: No images or code snippets were central to the thread; the solution combined CSS guidance with ensuring proper font file usage.

Summarized with AI on December 19. AI used: gpt-5.
1

Hello, I hope you’re doing well. I am using a variable font on my store. A variable font is a type of font that only has one file, and within that file, all the font styles are included, such as italic, bold, semi-bold, extra bold, etc. We can set the font weight according to the section. However, I have added a custom font in Shopify, but by default, the ‘thin’ style is being applied. I want to increase the font weight, but it’s not working. Can someone please help me with this?

2

Hi there,

I understand you’re having trouble adjusting the font weight for your variable font in Shopify. Since variable fonts allow multiple styles (like thin, bold, etc.) in one file, we just need to make sure that your theme’s CSS is set up correctly to control the weight.

Step-by-Step Solution:1. Access Your Theme’s Code:

  • In your Shopify admin, navigate to Online Store > Themes.
  • Next to your live theme, click Actions > Edit Code.

  1. Find the Correct CSS File:

    • In the code editor, locate the Assets folder.
    • Open your theme’s main CSS file (it could be named depending on your theme).

  2. Modify the Font Weight in CSS:

    • At the bottom of this file, you can add custom CSS to override the default font weight.

  3. Save Your Changes:

    • Once you’ve made your changes, click Save in the top-right corner.
    • Preview your store to see if the changes are applied.

  4. Troubleshooting:

    If the font weight still doesn’t change, ensure the variable font you’ve uploaded supports the specific weights you’re trying to apply (e.g., 400, 700). You can check this by inspecting the font file or referring to the documentation provided by the font creator.

    This should help solve the problem! Let me know if you run into any issues.

3

Thank you so much @Daniel_Taylors brother. I had no idea that we could extract a specific font file from variable font file. My issue has been resolved.