Use Typekit fonts

Typekit allows you to use custom fonts in your website. We suggest first watching Typekit's demo video to get a grasp of how Typekit works.

Please keep in mind that Typekit is a third-party solution, and is not officially supported by Shopify. Any questions regarding Typekit should be directed to

Install a Typekit font in a theme

  1. Create your Typekit account.

  2. From the Fonts page, hover over a font you like and click + Use fonts:

  3. In the Use this family dialog window, click the Web tab.

  4. Click create a new kit:

  5. Enter a descriptive name and the URL of your Shopify store:

  6. Click Continue.

  7. Under Default embed code, copy the two lines of embed code:

  8. In a new browser tab, log in to your Shopify admin.

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. Under Layouts, click theme.liquid.

  3. In the online code editor, paste the embed code above the closing </head> tag:

  4. Click Save.

  5. Back in Typekit, click Continue. You'll be shown an overview of your font.

  6. In the left column, you can adjust the various settings for the font that you selected.

    Under Selectors, you will see a CSS class selector is created for you called .font-name. If you want to create additional CSS class selectors, enter a name in the text field and click Add.

    Later you will will add the CSS class selector to HTML elements in your theme to tell Shopify to apply the Typekit font to that element.

  7. When you're finished, click Publish.

Now you can use your CSS class selector to apply the font to any section of your Shopify storefront. To see all your selectors, look under Selectors in the Typekit Kit Editor.

Apply a Typekit font to an HTML element

You can apply your CSS class to any HTML element on your Shopify storefront. For this example, we are going to apply the class .tk-acumin-pro to the logo in the theme.liquid template.

To apply the CSS class to an HTML element in your theme:

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. Click the template that contains the HTML element.

  3. Find the HTML code for the element where you want to use the Typekit font:

    <div class="logo">
        <h1><a href="/">{{ }}</a></h1>

5. Add the CSS class to the HTML element:

    <div class="logo">
        <h1 class="tk-acumin-pro"><a href="/">{{ }}</a></h1>

6. Click Save.

Ready to start selling with Shopify?

Try it free