Fonts: Using a TypeKit font for headers in Pipeline

Here are a few tips when using TypeKit fonts with Pipeline. You'll first need to have a TypeKit account with Adobe. I'll begin this tutorial after you've created an account an selected a font to use. In my example, I've selected the Bungee TypeKit font. 

1

Add your font to a Kit

Once you've selected a font, choose the Add to Kit option:

2

Publish your Kit

After adding your fonts, be sure to publish the Kit:

3

Verify your kit settings

Be sure you have your xxxxxx.shopify.com domain added. If you have a custom domain name, add that as well.

4

Get your Kit embed code

Choose the Embed Code link (1). In the pop-up window, the default option is fine (2). Copy the code (3)

That code (3) will be used in your theme.liquid file for the next step. 

5

Add embed code to theme.liquid

Open theme.liquid in the the Code Editor:

layout/theme.liquid

Around line 36, after the style.scss.css line, paste the embed code from your Kit.

Before:

After:

Save the file.

6

Get the font-family information from your Kit settings

Return to your Kit settings and click on Using fonts in CSS

Copy this information (highlighted area):

That's your font-family and fallback font-family. 

7

Use your TypeKit font as a heading font

Open style.scss.liquid in your Code Editor:

assets/style.scss.liquid

Pipeline 4 or higher, use this link instead:

assets/theme.scss.liquid

Change the value of $titleFontStack

Before:

After:

$titleFontStack: "bungee",sans-serif;

Save the file.

Result - Now your headings will use the new TypeKit font in Pipeline:

You can apply the same concept for your the body font and accent fonts, those settings are below the title font:

Still need help? Contact Us Contact Us