How to change the heading font in the Crave theme?

[pscullywicks]

Can’t change the heading typeface in the crave theme.

There’s no theme.scss.liquid so I’m adding code to the base.css

Below code doesn’t work, even with the !important tag.

@font-face {
    font-family: "Font name";
    src: url({{ "Filename" | asset_url }}) format("Format");
}

Also tried copying the heading code found in the base.css and editing it, but it just breaks the headings completely
“h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: var(–font-heading-family);
font-style: var(–font-heading-style);
font-weight: var(–font-heading-weight);
letter-spacing: calc(var(–font-heading-scale) * 0.06rem);
color: rgb(var(–color-foreground));
line-height: calc(1 + 0.3 / max(1, var(–font-heading-scale)));
word-break: break-word;”

Site https://mylittleroses.com.au/
Password peukop
Uploaded font that needs to be the heading typeface is “dreamorphansbold.woff2”

@KetanKumar @Ahsan_ANC I can see you’re both top contributors, I’m hoping you might have some suggestions

[Ahsan_ANC]

Hi, @pscullywicks thanks for asking about this. This is a common issue in applying custom fonts in Shopify.

Here is a tutorial that you can follow to get your font to work.

How to add custom fonts in Shopify in easy way

If you are still unable to do that, plz message here I will guide you more.

[PageFly-Richard]

Hi [email removed]Pscullywicks

I am Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendations.

We will have the following steps:

• first you need to download the font and convert to woff2 format

• next step you will upload that font to assets . file

• then add it to base.css like this: here is an example

• then we add css for --font-heading-family

Best Regards;

Richard-pagefly

[pscullywicks]

That hasn’t worked.

So Base.css looks like this
h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: ‘dreamorphansbold’;
font-style: var(–font-heading-style);
font-weight: var(–font-heading-weight);
letter-spacing: calc(var(–font-heading-scale) * 0.06rem);
color: rgb(var(–color-foreground));
line-height: calc(1 + 0.3 / max(1, var(–font-heading-scale)));
word-break: break-word;
}

and theme.liquid looks like this

@font-face {
font-family: ‘dreamorphansbold’;
src: local(‘dreamorphansbold’), url(https://cdn.shopify.com/s/files/1/0617/5162/3831/files/dreamorphansbold.woff2?v=1660794627) format(‘woff2’),
}

[Ahsan_ANC]

Your theme.liquid file does not have this code, I just checked plz check again or paste that code in base.css at the bottom.

[pscullywicks]

It’s now in both theme and base as pictured and still no change to the heading

[Ahsan_ANC]

[pscullywicks]

Hi,

That still hasn’t changed anything, but I was hopeful for a second there.

Any other suggestions?

[Ahsan_ANC]

Oh sorry for that, will you allow me to look for this issue in your code?

[Ahsan_ANC]

Found the issue

here plz replace comma at the end of the following line to semicolon

src: local('dreamorphansbold'), url('https://cdn.shopify.com/s/files/1/0617/5162/3831/files/dreamorphansbold.woff2?v=1660794627') format('woff2'),

[pscullywicks]

That’s done it, thank you!