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
Hi dmwwebartisan,
The password is daoroh 
Thanks,
Jay
Hi @jaylan_tahtali ,
Please follow these steps:
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
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
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.
okay cool thanks bro, those weights just in bold ?
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
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..
Hi @jaylan_tahtali ,
You cannot add ‘’ tag here: https://i.imgur.com/lOJrDLw.png
And check the end of the file, if there is not ‘’ 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
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?
yes i have. on m
