How to add custom font to Crave 3.0 theme

REALbabyman
Visitor
3 0 0

Hi all.

 

I'm looking at adding a custom font for all headlines in the new Crave theme (3.0). I followed some guides but I can't seem to get  it right. Somebody who can advise? 

Replies 5 (5)

PageFly-Kate
Shopify Partner
1000 309 296

Hi @REALbabyman 

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

- Find a font that you want to use. You can either use a font hosted on a third-party service such as Google Fonts, Adobe Fonts, or download a font file and host it on your own server.

- If you're using a third-party font, you need to add the font to your Shopify theme. Here's an example for adding a Google font:

 

<link href="https://fonts.googleapis.com/css2?family=Your+Custom+Font&display=swap" rel="stylesheet">

 

Replace "Your Custom Font" with the actual name of your font.

- Add the following CSS code to your theme's stylesheet (usually located in the "assets" folder):

 

h1, h2, h3, h4, h5, h6 {
   font-family: 'Your Custom Font', sans-serif;
}

 

- Save the changes and refresh your Shopify store to see the custom font applied to all headlines.

 

Hope my answer will help you

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.

REALbabyman
Visitor
3 0 0

Hi Kate and thanks for your reply.

 

Where should I put this code? h1, h2, h3, h4, h5, h6 { font-family: 'Your Custom Font', sans-serif; }

 

In Theme.liquid, Theme-editor.js or Base.css code?

 

Let me know. I followed your step, but it's not working. Thanks in advance

PageFly-Kate
Shopify Partner
1000 309 296

Hi @REALbabyman ,

You can paste this code at the bottom of the file base.css.

If you are still having problems. I'm always happy to help you.

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.

REALbabyman
Visitor
3 0 0

Thanks for your help Kate, but it seems like it don't work. My custom font is Adieu-Black. 

 

So I add the following in the base.cs code:

}
h1, h2, h3, h4, h5, h6 {
font-family: 'Adieu-Black', sans-serif;
}

 

Is this correct?

PageFly-Kate
Shopify Partner
1000 309 296

hi @REALbabyman ,

After read my message. You can try this code below: 

@font-face {
font-family: "adieu-black";
src: url("adieu-black.woff2") format("woff2"),
url("adieu-black.woff") format("woff");
}

h1 { font-family: "adieu-black"!important; }

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.