Custom fonts not applying to headers in dawn

Store Design
, ,

Topic summary

Problem: A custom font (“Magic Flavour”) isn’t applying to header elements in a Shopify Dawn theme despite adding @font-face in base.css and setting header selectors (h1–h5, .h0–.h5) to use it.

What was tried: The font was referenced via a CDN URL wrapped with the Liquid asset_url filter in @font-face, then applied with font-family: Magic Flavour !important to header selectors. No visual change occurred.

Key guidance: The font file must reside in the theme’s Assets folder for asset_url to work. A responder provided a simplified @font-face using asset_url and noted to ensure the .woff file is added to Assets:

  • @font-face { font-family: “Magic Flavour”; src: url({{ ‘MagicFlavour’ | asset_url }}) format(“woff”); }

Current status: Unresolved. The font is currently in “content > files,” not in the theme Assets folder. Next action: upload the .woff to the theme’s Assets folder and reference it via asset_url, then recheck if headers render with the custom font.

Summarized with AI on December 13. AI used: gpt-5.
1

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?

2

@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");
}
3

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.

4

@jasminsharp97 font file needs to be in assets folder