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

Store Design
, ,

Topic summary

Issue: Adobe Fonts added to a Shopify Empire theme didn’t appear after inserting the Typekit link and setting CSS variables in theme.css.liquid.

Diagnosis: Fonts load correctly (Adobe kit is working). The Empire theme (older setup) doesn’t use CSS variables for font assignment, and the YouTube tutorial likely targeted the Dawn theme.

Proposed fix:

  • Apply fonts via direct CSS selectors with !important, e.g.:
      • { font-family: ‘bilo’, sans-serif !important; }
    • h1, h2, h3, h4, h5 { font-family: ‘bodoni-urw’, serif !important; }
  • Add more specific selectors for any headings/sub-headers that still don’t pick up Bodoni.

Performance advice: After confirming, stop loading other (unused) fonts to improve site speed.

Context: OP provided a preview link after guidance on sharing a password/preview. Code snippets are central to understanding the solution.

Status: Partially resolved with clear implementation steps; awaiting OP’s confirmation. Unanswered: exact selectors for all elements needing the heading font.

Summarized with AI on December 30. AI used: gpt-5.
1

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:

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?

2

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.

1 Like
3

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.

4

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-online-store

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

1 Like
5

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

I’m looking forward to your reply!

6

Ok, so the fonts are loaded fine, thanks to Adobe :slightly_smiling_face:

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.

1 Like