Solved

Adding custom font to page while using Shogun

neltron
Tourist
5 1 1

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

@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
theme code.PNG

That's everything is Shopify then over in shogun I added the font to the custom font area by typing it in.

Shogun.PNG

Then when set the wrong font gets display on the live page

wrong.PNG

That's where I am at, if anyone has anyone solutions it would be greatly appreciated!

Thanks!!

Accepted Solutions (2)
diego_ezfy
Shopify Partner
2935 562 883

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:

diego_ezfy_0-1620784986368.png


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

◦ 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

neltron
Tourist
5 1 1

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.

Change.PNG

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; }

 

View solution in original post

Replies 10 (10)

Mircea_Piturca
Shopify Partner
1547 44 345

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

Finally—Add variant descriptions to your products

diego_ezfy
Shopify Partner
2935 562 883

@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

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

neltron
Tourist
5 1 1

@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
Css fonts.PNGfont names.PNG

 

 

<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
themmme.PNG
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!!!

Mircea_Piturca
Shopify Partner
1547 44 345

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

Finally—Add variant descriptions to your products
neltron
Tourist
5 1 1
diego_ezfy
Shopify Partner
2935 562 883

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:

diego_ezfy_0-1620784986368.png


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

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

neltron
Tourist
5 1 1

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!

neltron
Tourist
5 1 1

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.

Change.PNG

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; }

 

diego_ezfy
Shopify Partner
2935 562 883

@neltron Please share your store URL and storefront password (if it has one), I'll take a look into it.

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

sallyjohnson
Explorer
182 2 6

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

  1. Step one: On Page Builder, go to your Settings‍ First, go ahead and open the Shogun app and click on the Settings icon.
  2. Step two: Add your new font. Next scroll down to the Add Custom Fonts field and enter the name of the font. ...
  3. Step three: You are all done! And there you have it

you can also try Layoutbase page builder 

thanks

layoutbase.com

Sally Johnson - Layoutbase.com Ambassador