Dawn 15.0.2 custom font not working

Store Design
, ,

Topic summary

Custom font (Floane) doesn’t appear on the live Dawn 15.0.2 store, though it shows in the theme editor. The font files (WOFF/OTF) were uploaded and @font-face was added.

Key guidance and findings:

  • Check browser console for font parsing errors; some fonts uploaded to Assets can get corrupted. If errors appear, upload fonts to Admin > Files and reference with file_url. Shopify docs were shared.
  • Live CSS shows malformed @font-face src (broken url() and format()) that prevents loading. After fixing syntax in dev tools, the font loads.
  • Naming mismatch: @font-face defines font-family as “Floane-Regular” but components use “Floane”; this won’t match.

Recommended fixes:

  • Ensure correct @font-face syntax and consistent font-family naming across CSS.
  • Avoid per‑section overrides. Instead, set body { --font-heading-family: Floane-Regular, sans-serif; } in Theme Settings > Custom CSS so theme headings use the custom font.
  • Set Heading font in Theme Settings > Typography to a system font to avoid loading unnecessary theme fonts.

Status: Some users see the font working; OP hasn’t confirmed resolution. Central issue appears to be CSS syntax and naming consistency. Code details are crucial here.

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

Hi.

I am using the Dawn 15.0.2 Theme and my customised font is not showing up on the live website - although I can see it fine when working on the Theme.

I’ve uploaded WOFF & OTF of the font to assets and used the following code in my CSS.

@font-face {

font-family: “Floane-Regular”;

src: url(‘{{“Floane-Regular.woff” | asset_url }}’) format(“woff”);

font-weight: normal;

font-style: normal;

}

Hopefully it’s a simple solution. Thanks!

2

See previously asked question: https://community.shopify.com/c/shopify-design/custom-font-installation-not-working/m-p/2688558#M705035

3

Unfortunately I am still having the same problem. The font is showing up when I’m working on the theme but the live version (except on my Chrome browser) is still incorrect.

Any other ideas of how this can be solved?

4

Check for font file parsing problems in browser console. If found, upload to Files and use file_url filter.

https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#shopify-admin

If you want to add a font to an existing theme through the Shopify admin, then you should store your font in the Files section of the Shopify admin. This is because uploading some types of fonts to the assets directory through the admin code editor might lead to file corruption.

Would be nice to see the actual store (preview if not published) to have better ideas.

5

Thanks. I tried that and still the same problem. The site is live creaetr.com

The font should be Floane - this is what I see when working on the shop (and want to see live).

6

Are you sure it doesn’t work? Because when I go to your website and click on the Image’s text, the font family is ‘Floane, Regular’.

7

hmm. this is what I see in my browser:

Which looks broken, both inside URL() and format(). But your initial code looked fine.

When I’ve fixed them in my dev tools, the font loads ok.

Screenshot 2024-08-19 at 8.27.38 PM.png
Screenshot 2024-08-19 at 8.27.38 PM.png1870×209 53.9 KB

Also – you’re defining font family “Floane-Regular”, but some of your CSS rules are like

h6 {font-family: "Floane", serif;}

This would not match.

1 Like
8

Also – you’re overriding font-family for your headings in each sections “Custom CSS”. Like this:

h1,h2,h3,h4,h5,h6 {font-family: "Floane", serif;}

While technically it should work, but you need to do it for each section, so the much easier approach would be to redefine CSS variable used for this by theme code:

By default theme already has code like this:

h1,h2,h3,h4,h5,.h0,.h1,.h2,.h3,.h4,.h5 {
  font-family: var(--font-heading-family);
  ...
}

So we can go to “Theme Settings” => “Custom CSS” and enter this:

body{
 --font-heading-family: Floane-Regular, sans-serif;
}

And theme code will pick it up.

Finally, set the Heading font in “Theme Settings”=> “Typography”(?) to one of the “System Fonts” (Sans-serif) so that you’re not loading the font files you do not need.

1 Like