Use Typekit fonts

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

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 support@typekit.com.

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:

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

  4. Click create a new kit:

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

    Typekit 2
  6. Click Continue.

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

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

  9. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  10. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  11. Under Layouts, click theme.liquid.

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

    Typekit 4
  13. Click Save.

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

  15. 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.

  16. When you're finished, click Publish.

Note

It may take a few minutes for the changes to propagate.

Typekit 5

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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click the template that contains the HTML element.

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


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

5. Add the CSS class to the HTML element:


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

6. Click Save.

Want to discuss this page?

Visit the Shopify Community