Why isn't my custom font loading in Dawn 5.0?

Store Design
1

Hello!

I’m trying to get a custom font loaded into the code on my store, and I’ve looked at countless tutorials for how I can get this done. I understand it, but for some reason, something just refuses to work for me.

@font-face {
font-family: “NeutraText-Book”;
src: url(“NeutraText-Book.woff2”) format(“woff2”),
url(“NeutraText-Book.woff”) format(“woff”);
font-weight: normal;
font-style: normal;}
}

.list-menu__item { font-family: ‘NeutraText-Book’; }

.banner__heading { font-family: ‘NeutraText-Book’, sans-serif; }

This is the code I’m using. I have it in my Theme.Liquid and Base.css files - it seems like it wants to work, but it won’t? Do I have to put a proper URL or something? What am I missing?

Thanks!

2

I did notice the additional } after font-style. Even removing that, it still doesn’t work…

3

Hello @Phearhead !

Probably due to you trying to load the font with a relative path:

src: url("NeutraText-Book.woff2")

Assuming this font woff2 file exists in your theme assets you need to get the full url of it on the CDN

https://shopify.dev/api/liquid/filters#asset_url

src: url({{ "NeutraText-Book.woff2" | asset_url }})

Also see Font filters for use with shopifys fonts library

https://shopify.dev/api/liquid/filters#font-filters

4

Hi @Phearhead ,

Try following the instructions on the video. I also provided the instructions of instead on adding the font in the Asset folder, you add it using the file in the Admin settings

5

Ok, since I cannot seem to get this… let me know if this is correct…

@font-face {
font-family: “NeutraText-Book”;
src: url({{ “NeutraText-Book.woff2” | “THE ASSET URL GOES HERE, RIGHT?” }})
url({{ “NeutraText-Book.woff” | “THE ASSET URL GOES HERE, RIGHT?” }}) ;
font-weight: normal;
font-style: normal;
}

.list-menu__item { font-family: ‘NeutraText-Book’; }

Is this wrong?

6

So, I’m up to here, and it’s still not working…

@font-face {
font-family: “NeutraText-Book”;
src: url({{ “NeutraText-Book.woff2” | asset_url }}) format(“woff2”);
src: url({{ “NeutraText-Book.woff” | asset_url }}) format(“woff”);
}

All the tutorials work without having to put in a full url path, so what’s going on here?

7

@Phearhead

oh sorry its doesn’t work bcz you are missing font type

please upload these all font family type

TTF, OTF, WOFF, WOFF, SVG this are mandatory

8

It won’t even let me upload a TTF file. Not to mention, every instance of this that seems to work doesn’t require every webfont file type, it specifically requires the WOFF files.

9

Hi @Phearhead ,

You should be able to use ttf file but this only applies to certain browser. Please refer to the code below

@font-face {
font-family: 'My Font';
src: url({{"download-font.eot" | asset_url }}); /* IE9 Compat Modes */
src: url({{"download-font.woff" | asset_url }}) format("woff"), /* Modern Browsers */
url({{"download-font.woff2" | asset_url }}) format("woff2"),
url({{"download-font.ttf" | asset_url }}) format("truetype"), /* Safari, Android, iOS */
url({{"download-font.svg" | asset_url }}) format("svg"); /* Legacy iOS */
}