Prestige Theme - font weight for bold text

Solved

Prestige Theme - font weight for bold text

jaylan_tahtali
Explorer
50 0 4

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_0-1637709399510.png

 

Accepted Solutions (7)

LitCommerce
Astronaut
2860 684 745

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 745

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 745

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.

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 745

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 745

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 745

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 - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 745

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 21 (21)

dmwwebartisan
Shopify Partner
12321 2551 3715

@jaylan_tahtali 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jaylan_tahtali
Explorer
50 0 4
Hi dmwwebartisan,
The password is daoroh 🙂
Thanks,
Jay

LitCommerce
Astronaut
2860 684 745

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
jaylan_tahtali
Explorer
50 0 4

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:

 

jaylan_tahtali_0-1637807422056.png

 

I'm trying to get the font to look like the below:

 

jaylan_tahtali_0-1637810408772.png

 

Thanks,

Jay

LitCommerce
Astronaut
2860 684 745

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
jaylan_tahtali
Explorer
50 0 4

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?

 

jaylan_tahtali_1-1637817042557.png

 

Thanks,

Jay

LitCommerce
Astronaut
2860 684 745

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.

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
jaylan_tahtali
Explorer
50 0 4
okay cool thanks bro, those weights just in bold ?
LitCommerce
Astronaut
2860 684 745

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
jaylan_tahtali
Explorer
50 0 4

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 🙂

 

jaylan_tahtali_0-1637877370892.png

 

LitCommerce
Astronaut
2860 684 745

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
jaylan_tahtali
Explorer
50 0 4

Hi @LitCommerce ,

I pasted the code as shown below and it did not work.. it messed up my website a bit.

 

jaylan_tahtali_0-1637900288497.png

 

this is after..

jaylan_tahtali_1-1637900312373.png

 

and this was before..

jaylan_tahtali_2-1637900332788.png

 

LitCommerce
Astronaut
2860 684 745

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 - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
jaylan_tahtali
Explorer
50 0 4

@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

jaylan_tahtali_0-1638061203844.png

 

LitCommerce
Astronaut
2860 684 745

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
jaylan_tahtali
Explorer
50 0 4

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

jaylan_tahtali
Explorer
50 0 4

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 🙂

 

jaylan_tahtali_0-1638420666623.jpegjaylan_tahtali_1-1638420676016.jpeg

 

 

 

 

 

LitCommerce
Astronaut
2860 684 745

Hi @jaylan_tahtali,

I checked and it shows fine: https://i.imgur.com/wmUN2jA.png

Have you tried testing on another device?

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
jaylan_tahtali
Explorer
50 0 4
yes i have. on m
jaylan_tahtali
Explorer
50 0 4

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

LitCommerce
Astronaut
2860 684 745

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?

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!