Adding custom font to page while using Shogun

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

0 Likes
Mircea_Piturca
Shopify Partner
1485 42 313

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

@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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
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!!!

0 Likes
Mircea_Piturca
Shopify Partner
1485 42 313

@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
0 Likes

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
neltron
Tourist
5 1 1
0 Likes

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
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!

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