Using Typekit with Headway for Kickbutt Fonts

If you’ve been using Headway for a while, you may be wanting to spread your wings and start using different fonts other than the pre-packaged bundle. And if you’re a developer, you may have had nothing short of a nightmare trying to get 3 different font types to work for each of the browsers out there. Rather than agonize over trying to work with the @font-face command, try Typekit.

Typekit lets you put fonts on your site using a very short amount of script code (which Headway makes easy for you to install) so you can then customize any text on the page using simple CSS. I’m going to show you the simplest way I know to do that:

  1. Visit Typekit and click “Browse Fonts” to choose a font you want (you may want to sign up first – Portfolio membership should be enough for most people, and will give you access to ALL fonts on Typekit!)
  2. When you first register, you’ll be asked to create a Kit. Give the kit a name and add the URL for the site.
  3. Typekit will then give you some Javascript code to add to your site. Copy the code, and head back to the Dashboard on your Headway site. Click the Headway tab then click Configuration. Go to your “Scripts and Analytics” tab and paste your code in the “Header Scripts” box, as seen below:
  4. When you’ve found a font you want, click “Add to Kit”
  5. Be sure to slim down the “Weights & Styles” section so that visitors are not having to download a huge font file before being able to see your site properly (e.g. if you’re not going to use Italic, don’t add italic to the kit)
  6. Hit Publish.
  7. Wait, we’re not finished yet. Before you leave the Kit Editor, click on the “Using Fonts in CSS” to find out how to call this font in the Headway Live CSS. You should see something like this:
    h1 { font-family: garogier-1,garogier-2; }
  8. Copy this text and go back to your Headway site and open up your Visual Editor. Open up your Live CSS Editor (ToolsLive CSS Editor) and use the Headway CSS Map or a developer tool like Firebug to figure out which on-screen text you want to customize in your fresh new font.
  9. For example, if you wanted to change the site title like I have on my site then add this code:
    body.custom #top a { font-family: garogier-1,garogier-2; }

And that’s it! If you take a free package with Typekit, you will see a small Typekit badge in the lower right of your site (don’t try code it out, it doesn’t work). Typekit is perfect for any developers who want to add some “zing” to their sites without having to spend too much time with the code.

Marc Quinn is a web designer for internet marketers. He builds web sites that build immense email lists whilst rocking attractive well-degrading CSS3. He ONLY uses Headway in his designs. He thinks you should hire him for your next marketing site.

Spread the word!

15 Responses

  1. That’s a lot of work especially for someone who is new to CSS i.e. opening Firebug and then figuring out which element needs to be changed.

    A better way is to use Headway’s own Custom Font feature.

    Replace step 8 above by following the headway_add_custom_font instructions. For example, you’ll now have something like the line below in your custom_functions.php file.

    headway_add_custom_font(‘Garogier’, ‘garogier-1,garogier-2’);

    Now, when you go into Headway Visual Editor, you can easily select (from a drop-down menu) the new font that you have just added.

    This will be much easier for you to change fonts for every element in your design. It will appear in the Font drop-down menu when you select an element that’s text related.

    Or you can also use Tools → Mass Font Change in Headway Visual Editor to have a more consistent (and unique) look for your website/blog.

  2. Since TypeKit fonts are not free I’m assuming a similar method could be used here for google fonts which are free.

  3. I’m getting lost on the adding-custom-font part for the step 8 replacement.

    Ive gone to Typeface Font site and added two fonts to my account as instructed through step 7.

    I’ve added the last two lines here to my custom-PHP file and I get nothing in my visual editor.

    //Add two custom font families to be used by the visual editor.
    headway_add_custom_font(‘le-havre’, ‘le-havre, “blambot-casual”, sans-serif’);
    headway_register_custom_font(‘Futura’, ‘Futura, “Century Gothic”, AppleGothic, sans-serif’);
    headway_register_custom_font(‘Geneva’, ‘Lucida Sans, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif’);

    headway_add_custom_font(‘le-havre’, ‘le-havre,sans-serif′);
    headway_add_custom_font(‘blambot-casual’, ‘blambot-casual,sans-serif′);

    What am I missing?

  4. I have just signed up for Typekit and have followed the instructions about but still can’t get the new fonts to be selectable in the visual editor.

  5. Anybody have an answer for the Typekit integration into the Visual Editor from above? I’m having the same issue as Tara and Laura and can’t for the life of me figure it out. Also, didn’t see a post on this in the support forum. Any help please?

Leave a reply

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