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

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

Eddie_C
Tourist
3 0 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-...

 

https://community.shopify.com/c/shopify-apps/header-font-change/m-p/2265174

https://community.shopify...

 

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

Replies 4 (4)

PageFly-Noah
Shopify Partner
1317 233 275

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 </head> 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 </head>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
</style>
h1,.h1, h2,.h2 {
font-family: 'Oswald', sans-serif;
}

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Eddie_C
Tourist
3 0 1

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

Thanks anyway! 

By the way, I use PageFly and it's awesome. Love your product. Thanks for an awesome app. 🙂

PageFly-Noah
Shopify Partner
1317 233 275

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

 

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;

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Eddie_C
Tourist
3 0 1

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 <style> </style> 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!