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. 


Add your font to a Kit

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


Publish your Kit

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


Verify your kit settings

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


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. 


Add embed code to theme.liquid

Open theme.liquid in the the Code Editor:


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



Save the file.


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. 


Use your TypeKit font as a heading font

Open style.scss.liquid in your Code Editor:


Pipeline 4 or higher, use this link instead:


Change the value of $titleFontStack



$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