How can I change the header font in the Ride theme?

Store Design
, , ,
1

Please god help me, I’m losing my mind.

I’m trying to change the font of my header text. Simply the header text. I don’t want to change anything other headings, just the header text on the home page. Current font is Oswald and I want it to be Smooch.

I have tried the custom CSS section under the relevant section in the theme editor, nothing.

To do this, I originally specified a h2 header with the below code:

h2 {
font-family: ‘Smooch’;
}

It did nothing. So I specifed all headers using h1, h2, h3 etc and spaced them correctly. Nothing.

I tried adding an !important to try and force it through, nothing.

I then headed to “edit code” and went to the base.css asset and tried putting it at the bottom of the file with:

.header { font-family: ‘Oswald’; }

Nothing. Added an !important to that, nothing.

Tried adding the original code I was using in the custom CSS:

h1,h2,h3,h4,h5,.h0,.h1,.h2,.h3,.h4,.h5 { font-family: ‘smooch’; }

and also tried

h1,h2,h3,h4,h5, { font-family: ‘smooch’; }

Nothing.

In all cases I have tried an upper case “s” in smooch, tried removing the apostraphes around the word “smooch”, tried the official font handle of “smooch_n4” as listed in the Shopify dev resource. Nothing.

I’ve tried viewing the changes in incogito tabs for each change in case it was a cache issue. STILL nothing.

I have tried the steps in all of these community posts:

https://community.shopify.com/c/shopify-design/change-font-of-home-page-header-only/m-p/2254849

https://community.shopify.com/c/shopify-design/change-font-header-on-dawn-theme-to-brooklyn-font/td-p/1392806

(In any of the above posts where it’s trying to resolve a slightly different issue, rest assured I have changed it to the correct code to try and change the font-family)

I’m pulling my friggin hair out here. Any help would be enormously appreciated.

2

Hi @Eddie_C

This is Noah from PageFly - Shopify Page Builder App

Regards your concern about using a custom font: Oswald, first of all, you have to make sure that your store has connected to this font first.

You can follow my instructions below

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 


h1,.h1, h2,.h2 {
font-family: 'Oswald', sans-serif;
}

Hope this can help you solve the issue

Best regards,

Noah | PageFly

3

Hey Noah,

I really do appreicate the help, but the font I am trying to use (Smooch) is infact a Shopify supported font which is native to the platform, so I don’t need to import it from Google apis.

I tried your solution anyway and sadly it still didn’t work. :disappointed_face:

Thanks anyway!

By the way, I use PageFly and it’s awesome. Love your product. Thanks for an awesome app. :slightly_smiling_face:

4

Hi @Eddie_C Thank you so much for your kind words.

About the issue, so sorry i thought that you wanted to use Oswald instead, that’s why the Google font is loading from Oswald

In case you want to use the Smooch, please load in the Shopify Theme Editor > Theme Settings Typography first

PageFlyNoah_0-1697762217306.png
PageFlyNoah_0-1697762217306.png357×672 23.5 KB

I understand that smooch is already in the Shopify native font, but you need to load it in order to use. Shopify cannot load every font becaus

Then simply add this to have the smooch font working : font-family: Smooch;

5

Hi Noah,

Appreciate the continued effort to help, but unfortunately when I change the “theme settings > typography” option to Smooch it changes the font for the entire store, which isn’t what I want.

I tried dissecting the code you suggested and just including the below code above the “/head” in the theme.liquid:

h1,.h1, h2,.h2 { font-family: ‘Smooch’, sans-serif; }

…but it didn’t work. I also tried adding the tags before and after the code, it also didn’t work. The entire store font remains Smooch (as I had changed the “theme settings > typography” as you mentioned.

Thanks anyway, I appreicate you trying.

To recap, for anyone else reading, I EXCLUSIVELY want to change the main store header to a different font, the one at the VERY top, just beneath the annoucement bar, not the other headers or the other text. It’s also the exact spot where a logo would go if I selected one. But I have not selected one, so it’s THAT placeholding text I’m trying to change.

Thanks all!

1 Like