How to make H1, H2, H3, etc. bold when using the sans serif font setting ?

Store Design
, ,
1

Hello !

Here’s my website : www.lothaire.fr

For the sake of performance, I’m currently trying the “Sans serif” setting for fonts. Meaning that the font displayed will be the user OS’s default sans serif font.

Unfortunately, as you can see, H1, H2, etc don’t appear bold anymore.

For normal fonts, you can select the weight in the Themes settings. For the Serif/Sans Serif/Mono setting you can’t.

Is there a way to force it ?

2

Hey @LothaireBordeau

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1730195692328.png
Moeed_0-1730195692328.png1516×640 107 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @LothaireBordeau

You can add this code to Custom CSS in Online Store > themes > Customize > Theme settings to check if it solves your issue

.h1, .h2, .h3, h1, h2, h3 {
font-weight: 700 !important;
}
4

That wooooooorked.

Could I apply the same thing to body text ? Just making it a tiny bit heavier. Just a little bit.