How can I apply a custom font to only the heading on my webpage?

Store Design
, , , , ,
1

I have a custom font that I have applied to my whole page apart from p, being paragraphs, but the heading is categorised as a paragraph so I was wondering if I could apply the font to just the heading and not the other paragraphs.

Page - Hikomizubags.co.uk

2

Hi @Hikomizubags

This is David at SalesHunterThemes.

In this case if you want to add custom font for only heading on your store

you can use this css code to apply the heading font for heading

Follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

h1,.h1,
h2,.h2,
h3,.h3,
h4,.h4,
h5,.h5,
h6,.h6 {
font-family: 'Your custom font name';
}

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

David | SalesHunterThemes team

3

Hi @Hikomizubags ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

4

Hi, sorry for the confusion, I meant the header of my page, not the element heading. If you check the link to my page it should make sense

5

Hi, sorry for the confusion, I meant the header of my page, not the element heading. If you check the link to my page it should make sense

6

Hi @Hikomizubags
You can use this code:

.header__menu-item {
    font-family: var(--font-body-family)!important;
}

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

David | SalesHunterThemes team

7

Still doesnt work! The font in the header hasnt changed…