Solved

Custom Font does not show on front end

RoselindCo
Tourist
3 0 2

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

 

Correct Ogg Font from the back end.pngFront end with substituted font.png

Accepted Solution (1)

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 6 (6)

KetanKumar
Shopify Partner
36839 3635 11972

@RoselindCo 

sorry for that issue but font type are missing 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RoselindCo
Tourist
3 0 2

@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
Shopify Partner
36839 3635 11972

@RoselindCo 

nope its required  to all 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

RoselindCo
Tourist
3 0 2

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
Visitor
1 0 0

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...

Screen Shot 2022-09-30 at 12.44.10 PM.png

 

Here's how it looks on my phone:

Mobile.png

 

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