peepers ||

,

How to set up Adobe Fonts on your Shopify store

A question we come across often with clients is, "how do I use my brand fonts on my Shopify store?"

There are a number of ways to use licensed web fonts in your theme, and one of the popular options is to use Adobe Fonts.

Why use Adobe Fonts?

Adobe Fonts is a popular font service, hosting typefaces from both large foundries and independent type designers. If you’re already using this service for your brand or print materials, you'll already have access to a web license to host those fonts through Adobe.

If you're starting from scratch on your brand identity and have a Creative Cloud account, Adobe Fonts is an ideal place to find fonts for your design.

Want to be notified about tips like this in your inbox?

How to set up Adobe Fonts on your Shopify store

If you’re a visual learner, we recorded a screencast creating a demo web project. This will help you follow along to create your own. 

But if you prefer to read the instructions, all of the steps in the screencast are listed out in this article as well.

Step 1

Head to fonts.adobe.com and sign into your Creative Cloud account.

Screenshot of the Adobe Fonts homepage

Step 2

Browse the available fonts, or search for a specific typeface.

The font collection allows you to narrow your search by describing the font type, like Geometric, or Rounded.

Step 3

Once you find the font family you need, select "Add to Web Project."

An example of a font family landing page in Adobe Fonts, showing examples of all the available styles

This opens a pop-up modal where you can select weights and styles for this typeface. Don’t choose too many weights because the more font files a site has to load the more your web performance will take a hit. A good range is between 4-6 max for your entire web project.

Example of a Web Project pop-up screen, showing a list of the font weights and styles to add to their project

Once you’re done that, select "Create or add to existing project." This will open a dropdown list of your existing web projects—if you have any—or you can create a new one.

A project dropdown list showing several existing projects, within the Web Project pop-up screen.

If you have more than one typeface in your design, you can select the "Done" button, and repeat the first 3 steps with a different font family.

Once you add all your fonts to the project, copy the <link> and add that code snippet to the <head> tag of your theme. Or, if you're working with the Fuel Made team on a custom site design, send the <link> to us, and we'll add it to our code.

Note: Your developer will need to edit the CSS in order for your new font to show up on the website. Look for "font family:" declarations in your code to do this.

Here's an in-depth guide that explains how to update your code to reflect your new font (go to Step Four under "How to add custom fonts to Shopify). 

The Web Project pop-up screen showing the link code for that project, along with a list of fonts that have been recently added.

Editing your Adobe Web Project

Sometimes, you need to add or remove a font — maybe you forgot to add that italic weight for emphasis (<em>) text. How do you make changes?

Managing Fonts

From the Adobe Fonts homepage, navigate to "Manage Fonts" in the top right corner of the screen, under the Creative Cloud login.

The Web Projects tab shows a list of your projects, with a summary of the fonts used, the link code for your theme, and whether the project has too many fonts and will affect web performance.

Go to the "Edit Project" button, which will toggle a list of font families in that project. From here, you can check or uncheck the individual fonts, or delete the entire family. Once you're done, save your changes. 

If you're already using this code on your site, it may take a few minutes for these changes to propagate, so it might not show up right away.

The "Edit Details" view shows a list of all fonts in a project. Users can toggle fonts on and off or delete font families entirely.

Have Fun

Choosing typefaces is an exciting part of a brand design, and Adobe Fonts has plenty of options to choose from. 

We've often used Adobe Fonts when designing for our clients, due to the availability of high-quality fonts that can be used for both print and web design.

Don't forget to sign up for our newsletter to get ecommerce tips directly in your inbox.

Kellie Kowalski

Kellie Kowalski

Kellie Kowalski is a UX and Visual Designer who specializes in building accessible interfaces by blurring the lines between design and development. When she's not tinkering with design systems, she's working on her next weightlifting PR.

Ready? Let’s Talk.