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 xxxxxx.shopify.com 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
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: