Typekit + Unstack

Have a Typekit account and want to pull in some fonts that aren't currently available in your account? This is the article for you. 

The first step is to log into your Unstack account, open Integrations and scroll down to Typekit under Libraries. Click the (+) sign and enter your Kit ID.  

Don't already have a Kit ID? Here is how to make one.

  1. In Typekit, identify the font(s) you'd like to use
  2. Select "Use Font" which should show you a modal
  3. In the modal select the "Web" tab and click create new kit
  4. On the next screen, add the domains where you'd like to use this font and create the kit!

Next, you'll need to add a custom integration to your account so that your fonts are actually applied to the correct styles. To do this, add a custom "header" integration (outlined in this guide) with the below and replace the [FONT-FAMILY] placeholder with the actual font family you're trying to use. 

Additionally, the below was configured for a sans-serif font. If your font is a serif font, then remove sans- from both lines. 

h1, h2, h3, h4 { font-family: [FONT-FAMILY], sans-serif !important; }
p { font-family: [FONT-FAMILY], sans-serif !important; }
#primary-nav li > a.link { font-family: [FONT-FAMILY], sans-serif !important; }

To override the font family for your headers:

h1, h2, h3, h4 { font-family: [FONT-FAMILY], sans-serif !important; }

To override your paragraph font family:

p { font-family: [FONT-FAMILY], sans-serif !important; }

To override the font family used by your header links:

#primary-nav li > a.link { font-family: [FONT-FAMILY], sans-serif !important; }

One the integration has been added, the fonts from Typekit should override the font defined under Styles in Unstack in your rendered pages; emphasis on "rendered". Since these fonts are being applied via a custom integration, they'll never be applied to text in the editor view. 

If you have any trouble with this, you're more than welcome to contact our support team directly for 1-on-1 assistance.

Articles in this section

Was this article helpful?
0 out of 0 found this helpful