How to add custom font to Crave 3.0 theme

[REALbabyman]

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? 

[PageFly-Kate]

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

[REALbabyman]

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]

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.

[REALbabyman]

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]

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