Variables font is not working in Shopify

[alexian]

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?

[Daniel_Taylors · Accepted solution]

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.

2. 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).

3. Modify the Font Weight in CSS:

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

4. 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.

5. 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.

[alexian]

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.