Prestige Theme - font weight for bold text

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

www.leikenhair.com

Thanks so much for your help in advance :).

Jay

@jaylan_tahtali

your store is password protected please share your store front password.

Thanks!

Hi dmwwebartisan,
The password is daoroh :slightly_smiling_face:
Thanks,
Jay

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!

1 Like

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 :slightly_smiling_face:

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.

1 Like

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.

1 Like

@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!

1 Like

boom! that worked! @LitCommerce you’re a legend! thankyou so much. really appreciate your assistance and patience :slightly_smiling_face:

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 :slightly_smiling_face:

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