Liquid, JavaScript, themes, sales channels
Hello,
So I have been trying to add two custom fonts for about three days now and I can't seem to get it. Also not sure if this is a Shopify or a shogun thing at this point.
I am using the Debut theme in Shopify and Shogun page builder on top of that, I can get the font to display on my computer but on other devices the default fonts are displayed.
The site is: https://later-days-coffee-co.myshopify.com/
This is what I have so far, my programming experience is about a 2 out of 10 so I've just been following what I have seen on tutorials.
I have uploaded my woff and woff2 files for Stellar and Recoleta into my assets and also created a new css.liquid file and used the code below.
@font-face {
font-family: "Recoleta SemiBold";
src: url("Recoleta_SemiBold.woff2") format("woff2"),
url("Recoleta_SemiBold.woff") format("woff");
font-weight: normal;
font-style: normal;
}
h1 {
font-family: "Recoleta_SemiBold" !important;
}
@font-face {
font-family: "Stellar Light";
src: url("Stellar_Light.woff2") format("woff2"),
url("Stellar_Light.woff") format("woff");
font-weight: normal;
font-style: normal;
}
I also add the @font-face at the bottom of my Theme.css file just to cover all my bases
That's everything is Shopify then over in shogun I added the font to the custom font area by typing it in.
Then when set the wrong font gets display on the live page
That's where I am at, if anyone has anyone solutions it would be greatly appreciated!
Thanks!!
Solved! Go to the solution
This is an accepted solution.
I noticed on your screenshot that you wrote {% include 'css-fonts' %}, in case you haven't renamed that, it's different from the tutorial. If you purposefully altered the name of the file, Shogun is probably overwriting the custom font code from the tutorial since it's not being loaded into your theme.
You also have broken code in your theme.js file (you pasted CSS code in there instead of Javascript) which is leading to a multitude of different issues:
At this point, given the amount of customizations/bugs present, I'd recommend one those:
- requesting assistance to a developer;
- to Shogun support;
- downloading a fresh copy of Debut to start fresh.
Kind regards,
Diego
This is an accepted solution.
Solved by starting with a new base theme and had to change the name of my theme file in the Assets to "theme.css.liquid" because that the file name shogun is looking for.
and using this code at the bottom of the theme file for my font.
@font-face {
font-family: "Recoleta-Black";
src: url('{{ "Recoleta-Black.eot" | asset_url }}');
src: url('{{ "Recoleta-Black.eot" | asset_url }} ?#iefix') format("embedded-opentype"),
url('{{ "Recoleta-Black.woff" | asset_url }}') format("woff"),
url('{{ "Recoleta-Black.woff2" | asset_url }}') format("woff2"),
url('{{ "Recoleta-Black.ttf" | asset_url }}') format("truetype");
}
h1, h1 a, h2, h2 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'Recoleta-Black' !important; }
Your @font-face CSS declaration is the issue. You need absolute URLs. Upload your fonts to your files folder and use that URL.
Something like:
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Roboto Bold'), local('Roboto-Bold'),
url(https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-700.woff2) format('woff2'),
url(https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-700.woff) format('woff');
}
This may help https://sections.design/blogs/shopify/preloading-fonts. It is mostly on preloading fonts but should give you a clue on how to add custom fonts to Shopify
@neltron
Regardless of Shogun, you can follow this tutorial to add custom fonts to any Shopify theme without apps.
This way you can make use of the Shogun features whilst using your custom fonts without relying on them. Let me know if it works for you.
Kind regards,
Diego
@Mircea_Piturca & @diego_ezfy Thanks for the responses! but still no luck sadly
I changed the approach and followed both guides but I have a "-" in my font family name files which the tutorials don't could that be my issue?
Heres my new snippet css-fonts.liquid file, font file names, and the code used
<style>
@font-face {
font-family: "Recoleta-Black";
src: url('https://cdn.shopify.com/s/files/1/0550/7445/5730/files/Recoleta-Black.eot') format("embedded-opentype"),
url('https://cdn.shopify.com/s/files/1/0550/7445/5730/files/Recoleta-Black.woff') format("woff"),
url('https://cdn.shopify.com/s/files/1/0550/7445/5730/files/Recoleta-Black.woff2') format("woff2"),
url('https://cdn.shopify.com/s/files/1/0550/7445/5730/files/Recoleta-Black.ttf') format("truetype"),
}
h1,h2,h3,h4,h5,h6,html,body,*,[id] *{
font-family: "Recoleta-Black";
}
</style>
One guide also said to remove the query string from the Shopify hosted files URL which I'm guessing is this "?v=1620764328" so I tried it both ways.
Then add {% include 'css-fonts' %} to the bottom of my theme.liquid
Might try to just find an alternative for site launch but I'll keep trying to get it! Might be shogun getting in the way now, so also head over to their support site to hit this from both sides.
Thanks!!!
@neltron Can you share your store pass? Not the actual Shopify account one, just the one that you need to access the storefront.
I am afraid that without it we are unable to debug this.
@Mircea_Piturca , @diego_ezfy
The password should be disabled now
https://later-days-coffee-co.myshopify.com/
This is an accepted solution.
I noticed on your screenshot that you wrote {% include 'css-fonts' %}, in case you haven't renamed that, it's different from the tutorial. If you purposefully altered the name of the file, Shogun is probably overwriting the custom font code from the tutorial since it's not being loaded into your theme.
You also have broken code in your theme.js file (you pasted CSS code in there instead of Javascript) which is leading to a multitude of different issues:
At this point, given the amount of customizations/bugs present, I'd recommend one those:
- requesting assistance to a developer;
- to Shogun support;
- downloading a fresh copy of Debut to start fresh.
Kind regards,
Diego
Ok thanks for looking all that over, yeah it seems that I've messed something up along the way here ill start fresh and give it another go.
Thanks for all the help!
This is an accepted solution.
Solved by starting with a new base theme and had to change the name of my theme file in the Assets to "theme.css.liquid" because that the file name shogun is looking for.
and using this code at the bottom of the theme file for my font.
@font-face {
font-family: "Recoleta-Black";
src: url('{{ "Recoleta-Black.eot" | asset_url }}');
src: url('{{ "Recoleta-Black.eot" | asset_url }} ?#iefix') format("embedded-opentype"),
url('{{ "Recoleta-Black.woff" | asset_url }}') format("woff"),
url('{{ "Recoleta-Black.woff2" | asset_url }}') format("woff2"),
url('{{ "Recoleta-Black.ttf" | asset_url }}') format("truetype");
}
h1, h1 a, h2, h2 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'Recoleta-Black' !important; }
@neltron Please share your store URL and storefront password (if it has one), I'll take a look into it.
hy there, If you want to insert new fonts in your Shopify theme, using shogun builder then you can follow these steps given in the link https://getshogun.com/learn/add-font-shopify
you can also try Layoutbase page builder
thanks
layoutbase.com
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024