How to add custom font to Crave 3.0 theme

Technical Q&A
1

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?

2

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:

  • 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

3

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

4

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.

5

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?

6

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; }