Adobe Fonts

Typekit is now known as Adobe Fonts. If you've previously integrated Typekit fonts into your theme, you'll need to make some adjustments and follow the new process below.

In This Article

• Using Adobe Fonts
• Creating a Web Project
• Adding Fonts to your Web Project
• Adding Fonts to your Shopify Theme
• Using Fonts in your Shopify Theme

Using Adobe Fonts

Before using Adobe Fonts, you'll first need to create an Adobe ID. For more information on how to create or update your Adobe ID, we'd suggest checking out the following article.

 

Creating a Web Project

Once you've logged into your Adobe account, please head to the "Browse Fonts" tab. This page will look something like the following:

 

 

You can then browse through the list of available fonts to find the font you'd like to add to your storefront. When you've located the font you'd like to use in your storefront, please click the embed button "</>".

 

Adding Fonts to your Web Project

Once you've selected the font you'd like to use in your storefront, you'll need to enter a name for your project and select the font variants you'd like to use. You can then click the "Create" button.

 

 

You can then click the "Activate fonts" button" to activate your fonts. Please keep in mind that your fonts must be activated to use them on your storefront.

 

Adding Fonts to your Shopify Theme

Once you've added your fonts to your Web Project, you'll be presented with a line of code you'll need to add to your Shopify theme, this code may look something like the following:

 

<link rel="stylesheet" href="https://use.typekit.net/btr8szx.css">

 

You can then log into your storefront and head to the Online Store > Themes section in Shopify, here, you can click the "Actions" button on a theme of your choice and click the "Edit code" button and head into your "theme.liquid" layout. You can then locate the following code in your layout:

 

{{ 'styles.scss.css' | asset_url | stylesheet_tag }}

 

And add the code you've been provided from Abobe Fonts right below it, for example:

 

{{ 'styles.scss.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="https://use.typekit.net/btr8szx.css">

 

Using Fonts in your Shopify Theme

Once you've added the code above to your "theme.liquid" layout, you can head to your "styles.scss.liquid" file located in Online Store > Themes > Edit code > Assets, here, you can scroll down to the very bottom of the file to call out your font, for example:

 

h1 {
  font-family: brandon-grotesque, sans-serif;
}