Custom Font does not show on front end

Solved
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)

Accepted Solutions
diego_ezfy
Shopify Partner
2300 413 542

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 5 (5)
KetanKumar
Shopify Partner
24923 2498 9040

@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
24923 2498 9040

@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
2300 413 542

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

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