Shopify themes, liquid, logos, and UX
Hi team,
I'm wanting to change the font weight for the bold text on my website from weight 700 to weight 600. Right now the weight of all the bold text is 700 but I would like it to be 600 throughout the store/website. Please note I am only talking about bold text (not regular non-bold text).
Thanks so much for your help in advance :).
Jay
Solved! Go to the solution
This is an accepted solution.
Hi @jaylan_tahtali,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
b, strong {
font-weight: 600 !important;
}
Hope it helps!
This is an accepted solution.
Hi @jaylan_tahtali,
Because you are importing font Regular, so when bold all will be the same. This can be seen as a bug in shopify's font system.
If you want to use all the font weights, you need to directly import google font with all Styles, it will work fine.
Refer https://fonts.google.com/specimen/Work+Sans , https://i.imgur.com/28AlpXg.png
Go to layout > theme.liquid file, find ':root' and add code here: https://i.imgur.com/SlGVjpv.png
Hope it is clear to you.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
This is an accepted solution.
Hi @jaylan_tahtali,
You should choose the font weight you need, not all, in my opinion only need 300, 400, 500, 600, 700.
If you need italic, you can choose to add it.
This is an accepted solution.
Hi @jaylan_tahtali,
No, bold only if weight is above 500, ie 600, 700. When you add and change font weight 600, 700 you will see the difference.
This is an accepted solution.
Hi @jaylan_tahtali,
You can find it in the css-variables.liquid file.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
This is an accepted solution.
Hi @jaylan_tahtali,
You cannot add '</style>' tag here: https://i.imgur.com/lOJrDLw.png
And check the end of the file, if there is not '</style>' tag you can add it, if it already exists you don't need to add it.
Hope it is clear to you.
This is an accepted solution.
Hi @jaylan_tahtali,
You can try moving it to the top of the file: https://i.imgur.com/VGftJLb.png
Hope it helps!
your store is password protected please share your store front password.
Thanks!
This is an accepted solution.
Hi @jaylan_tahtali,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
b, strong {
font-weight: 600 !important;
}
Hope it helps!
Hi @lit,
Thanks so much for your response :).
That worked according to my font checker chrome extension, but visibly there is no difference. See below:
I'm trying to get the font to look like the below:
Thanks,
Jay
This is an accepted solution.
Hi @jaylan_tahtali,
Because you are importing font Regular, so when bold all will be the same. This can be seen as a bug in shopify's font system.
If you want to use all the font weights, you need to directly import google font with all Styles, it will work fine.
Refer https://fonts.google.com/specimen/Work+Sans , https://i.imgur.com/28AlpXg.png
Go to layout > theme.liquid file, find ':root' and add code here: https://i.imgur.com/SlGVjpv.png
Hope it is clear to you.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Hi @LitCommerce ,
Thanks so much for getting back to me. I will go ahead and try that. Which styles from the Work Sans family should I select? Do I select every font available there?
Thanks,
Jay
This is an accepted solution.
Hi @jaylan_tahtali,
You should choose the font weight you need, not all, in my opinion only need 300, 400, 500, 600, 700.
If you need italic, you can choose to add it.
This is an accepted solution.
Hi @jaylan_tahtali,
No, bold only if weight is above 500, ie 600, 700. When you add and change font weight 600, 700 you will see the difference.
Hi @LitCommerce ,
Thanks so much for getting back to me. I've gone into theme.liquid and cannot find ":root" in there.. I have tried control "F" and also manually searching for it but cannot find it.
You can see in my screenshot below that what I see from line 8 down is different to the screenshot you sent me..
Thanks for your help 🙂
This is an accepted solution.
Hi @jaylan_tahtali,
You can find it in the css-variables.liquid file.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Hi @LitCommerce ,
I pasted the code as shown below and it did not work.. it messed up my website a bit.
this is after..
and this was before..
This is an accepted solution.
Hi @jaylan_tahtali,
You cannot add '</style>' tag here: https://i.imgur.com/lOJrDLw.png
And check the end of the file, if there is not '</style>' tag you can add it, if it already exists you don't need to add it.
Hope it is clear to you.
@LitCommerce Thanks for your response again bro. That didn't work either.. I tried only using the 600 weight font from google aswell.
The text still looks the same
This is an accepted solution.
Hi @jaylan_tahtali,
You can try moving it to the top of the file: https://i.imgur.com/VGftJLb.png
Hope it helps!
boom! that worked! @LitCommerce you're a legend! thankyou so much. really appreciate your assistance and patience 🙂
Hi @LitCommerce , hope you are well.
I have noticed that the TM symbols used throughout my website have gone a little more bold and darker since updating the code. i compared it to an old theme duplicate version I have just to make sure it wasn't my eyes lol. would you know why that might be and how I can make the TM symbols back to normal? it's also in body text as well not just the headings. thanks heaps 🙂
Hi @jaylan_tahtali,
I checked and it shows fine: https://i.imgur.com/wmUN2jA.png
Have you tried testing on another device?
Hi @LitCommerce ,
Are you viewing it on desktop? Yes, I have tried viewing from both desktop and mobile. The TM symbol only looks darker and bold when viewed on mobile. For some reason when viewed on desktop it is fine. This is what I find very strange and cannot figure out..
Thanks for your help as always
Hi @jaylan_tahtali,
I tested and it works fine on both desktop and mobile:
https://i.imgur.com/gvyS2VM.png
https://i.imgur.com/pI2M73M.jpg
Can you try to test it on another device?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024