How to use TypeKit fonts with Headway

This tutorial was done using Headway version 3.7.16

You may want to use fonts outside of Google Fonts.  We have a Screencast tutorial already on using custom fonts but this tutorial will be specific to TypeKit.

Step One:  Login to TypeKit

Step Two:  Find the font you want to use. I’m going to use Proxima Nova.

Make sure you are finding one that is Available for Web Use.

You can find that by looking at the icons underneath the font name.

The <> indicates the font is available for web use. (Left)typekit-1 typkit-2

You can also search for fonts only available for web use (see image on right).

 

 

 

Once you find the font you want, hover over it (you can also click on the font to load the font page).  Then click on “Use Fonts”.

typkit-3

The above is what you will see if you hover over the font on the main screen.  Below is what you should see if you click on the font to load the font’s page.

typkit-4

 

Once you click on Use Fonts, a popup will come up where you will need to click on the “Web” tab.  Once there, click on “Create a new kit”.

typkit-5

 

Step 3: Create your kit

Once you click on “Create a new kit”, a browser pop-up will appear allowing you to name your kit and input which domains will use the kit.

typkit-6Once done, click Continue.

Step 4: Copy and Paste Code into Header Scripts

Once you click continue, you will be given code that needs to go in the <head> tag.  It should look like this:

Copy and paste the code TypeKit gives you into the Headway Header Scripts Area

typkit-7

Once you’ve done that and hit save on that screen, then you can hit continue in the TypeKit pop-up.

Step 5: Now Type in your selectors or code your custom CSS

typkit-8

 

For example, if I wanted to use CSS to apply the font I chose to the body, I would use body {font-family: "proxima-nova";}

If you use the TypeKit selector box, make sure you click “Add” once you type in your selector and then hit “Publish” in the bottom right hand side of the pop-up.

Once you do that, your fonts should change in the selectors you added (assuming you do not have more specific customizations overriding the fonts).

typkit-9

If you have any questions, you can post in the comments or post a thread in the community forums.

Spread the word!

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress