Custom fonts not applying to headers in dawn

[jasminsharp97]

I'm working on this site: https://gelt-glow.myshopify.com/

This is the password: tughao

I want to use a custom font, Magic Flavour, on all the headers across my site. I added the font family at the bottom of the base.css file like this:

@font-face {
font-family: "Magic Flavour";
src: url({{ "https://cdn.shopify.com/s/files/1/0653/4224/2976/files/MagicFlavour.woff?v=1732649632" | asset_url }}) format("woff");
}

And then I adjusted the font family for my headers here:

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: Magic Flavour!important;
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;
}

But it didn't apply anywhere. What am I doing wrong?

[suyash1]

@jasminsharp97  change to this and check, also make sure that you have added woff files to assets folder

@font-face {
font-family: "Magic Flavour";
src: url({{ 'MagicFlavour' | asset_url }}) format("woff");
}

[jasminsharp97]

I tried that and nothing changed! Currently the file is in content > files, I don't know where else I should put the font file, and how to get the URL from there.

[suyash1]

@jasminsharp97 font file needs to be in assets folder