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!!
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
1 Like
@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
1 Like
@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
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.
@neltron Please share your store URL and storefront password (if it has one), I’ll take a look into it.
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!
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; }
1 Like
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
- Step one: On Page Builder, go to your Settings First, go ahead and open the Shogun app and click on the Settings icon.
- Step two: Add your new font. Next scroll down to the Add Custom Fonts field and enter the name of the font. …
- Step three: You are all done! And there you have it
you can also try Layoutbase page builder
thanks
layoutbase.com
