Shopify themes, liquid, logos, and UX
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-...
(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.
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.
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. 🙂
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
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.
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!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024