Dawn 15.0.2 custom font not working

Store Design
, ,
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/post/2688558

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.

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.