How do I add multiple Adobe Fonts to my Shopify Site? (Empire Theme)

Bryce_Sunstone
Tourist
3 0 0

I'm not a developer and am struggling to understand what to do and have been trying to follow tutorials through YouTube videos.

Adobe Fonts lets you create a "Web Project" where you can add multiple fonts and they will give you a snippet of code to put in your theme.liquid file on Shopify.

This is the snippet they gave me: <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

I added it to the theme.liquid file on line 79. I then followed a YouTube video on how to get the site to register those fonts and utilize them on the website.

 

I then went to the file "theme.css.liquid" and at the very bottom typed this in.
 :root {
--font-body-family: "bilo", sans-serif !important;
--font-heading-family: "bodoni-urw", serif;
}

The fonts aren't changing inside of my theme. Can someone help me figure out what I need to do to get the body, headers, and sub-header fonts to change to the Adobe ones I'm trying to push sitewide?

Replies 5 (5)

tim
Shopify Expert
3466 280 1286

Ideally, you should share a link to your store and preview password if one is set.

 

There are 2 possible problems:

1. Your fonts are not loaded

2. Your fonts not applied where you want them to apply.

 

I guess Youtube video was, say for Dawn theme and yours is not.

Given that your asset is called theme.css.liquid I think that your theme is most probably an older one and does not use CSS variables you've tried to set.

 

Better recommendation can be given if we can see your site.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Bryce_Sunstone
Tourist
3 0 0

Hi Tim, I believe it was. How do I set a preview password? I'd be happy to share the link and a preview password.

tim
Shopify Expert
3466 280 1286

If your store is published, then simply share the URL. 

 

If it's not live yet, then also share the password as described in https://help.shopify.com/en/manual/online-store/themes/password-page#add-password-protection-to-your... 

 

If it's not the published theme, you'd need to share a preview link as in https://help.shopify.com/en/manual/online-store/themes/adding-themes#share-theme-preview 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Bryce_Sunstone
Tourist
3 0 0

Hi Tim, here is the preview of the unpublished theme. 
Bryce_Sunstone Website

I'm looking forward to your reply!

tim
Shopify Expert
3466 280 1286

Ok, so the fonts are loaded fine, thanks to Adobe 🙂

 

However, the theme does not use CSS variables to assign fonts to elements, so you'd need to do it differently.

 

Say, start with something like:

* {
  font-family: 'bilo', sans-serif !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'bodoni-urw', serif !important;
}

Then it'd be necessary to see which elements you want in this Bodoni are not and add those to the second rule.

 

This is the best I can suggest "from outside"

 

After you do this, it's recommended that you stop loading other fonts' files to improve speed. Like the code you have at the top of your stylesheet.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com