Why isn't my custom font displaying on the front end?

[RoselindCo]

Hi Everyone!

Thank you in advance for your kind help.

So I already added custom CSS and custom fonts to a couple of Shopify stores, so I know how to upload the files to the assets folders and add the @font-face to the code. But this time I truly tried everything I could find here and in other forums and nothing works.

I’m trying to add the custom font OGG as the headings font to the Impulse theme and followed their article. They show on the back end/when I’m logged in, but not on the front end in both Safari and Chrome. When you look at the code the CSS command works, but it can’t find the custom font and substitutes it with Times. So there needs to be some kind of connection issue.

Store: https://birdie-nall.myshopify.com/

PW: heritage

Here’s what I’ve done:

1. Uploaded the .woff, .woff2 and .eot files to the Assets

2. Tried adding the following code to both my theme-custom.css (how I usually do it) and the css-variables.liquid (how Archetype themes describe in their article) files:

@font-face{
font-family: ‘Ogg-Regular’, serif;
src: url(‘{{ ‘Ogg-Regular.eot’ | asset_url }}’); /* IE9*/
src: url(‘{{ ‘Ogg-Regular.eot?#iefix’ | asset_url }}’) format(‘embedded-opentype’), /* IE6-IE8 /
url(‘{{ ‘Ogg-Regular.woff2’ | asset_url }}’) format(‘woff2’), / chrome, firefox /
url(‘{{ ‘Ogg-Regular.woff’ | asset_url }}’) format(‘woff’); / chrome, firefox */
}

.Heading, .Rte h1, .Rte h2, .Rte h3, .Rte h4, .Rte h5, .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
font-family: ‘Ogg-Regular’, serif!important;
font-style: normal;
font-weight: 400;
letter-spacing: 1px;
}

Also tried a few other verbiages, but the above should be correct? Emptied cashes and everything, but it just doesn’t show on the front end.

Thank you SO much for your help!

Sally

[KetanKumar]

@RoselindCo

sorry for that issue but font type are missing

custom font required to TTF, OTF, WOFF, WOFF2 and SVG

[RoselindCo]

@KetanKumar Thank you for kindly getting back to me! Really TTF and OTF? I thought those were for desktop and not web fonts? With the web font package only WOFF, WOFF2 and EOT came.

[KetanKumar]

@RoselindCo

nope its required to all

[diego_ezfy]

Hi, @RoselindCo

Please take a look into this tutorial,

Although it doesn’t really matter whether you upload the fonts to a server or the Assets folder, I prefer to avoid using the assets folder since it won’t show you what URL the fonts are located and opens room for things to go wrong.

Uploading them directly to your store’s database, like the tutorial shows, makes at least that part easier.

Let me know how it goes.

Kind regards,
Diego

[RoselindCo]

Dear @diego_ezfy ,

Thank you so much for your kind help. That was actually it and this tutorial worked perfectly! Before Assets always did work for me, but glad to hear this way is even safer for them to show up correctly.

Can’t thank you enough for your kind help!

All my best,

Sally

[tam1445]

Hey Diego,

I have followed all instructions on that tutorial page you provided. But for some reason the font still does not appear when I view the preview link on my mobile phone. Looks good on my desktop though.

Here’s how it should look…

Here’s how it looks on my phone:

Here’s the code I used…

Theme Liquid Page:

{% style %}

@font-face {
font-family: “Custom Font1”;
src: url({{“SchnyderWideM-Demi-Web.woff2” | asset_url }}) format(“woff2”);
}

@font-face {
font-family: “Custom Font2”;
src: url({{“SchnyderWideM-Light-Web.woff2” | asset_url }}) format(“woff2”);
}

{% endstyle %}

Base CSS Page:

}

.banner__heading.h0 {
font-family: “Custom Font2”
}

h1,h2 {
font-family: “Custom Font2” !important;
}

#Banner-template–16530399723742__image_banner > div.banner__content.banner__content–middle-center.page-width > div > h2 > span {
font-family: “Custom Font2”
}
}

I uploaded the WOFF2 files as an asset and also as files.

I originally followed instructions from this video > https://www.youtube.com/watch?v=CRNTnASxTCg

For the most part it all worked. But for some reason it doesn’t appear to work on mobile.

What am i missing??? Please help!

Thank you