Check out the nice new type on my blog!
Okay, so I'm not much of a designer but I really love seeing new typefaces on the web with @font-face. Yep, I'm a little tired of Helvetica, Arial and Times.
For this blog (and my Awesome blog) I'm using Typekit to supply the fonts for me. It's fairly easy to set up an account with Typekit and get access to a bunch of nice fonts. Plus, I don't need to host the font files myself and the type designers get paid (yay).
I'm using a new feature of TypePad that allows me to add Typekit fonts to my design. The feature is a bit tricky to use so I thought I'd post step-by-step instructions here for all who want to try it out.
Here's how it's done:
1. Sign up for Typekit (and TypePad Pro Unlimited)
Sign up for Typekit via http://typekit.com/ref/typepad to get a discount on Typekit for your TypePad blog. Another option is to sign up for a free account which gives you two free fonts. I don't recommend using more than two fonts per site anyways!
2. Set up a Kit
After you create a Typekit account, you'll have a "Kit" for your blog. A Kit is a set of fonts for an individual site. For example, I keep all the fonts for this blog in a Kit with blog.leahculver.com as the domain. This means that any fonts I add to the Kit can be used at blog.leahculver.com.
3. Add a font to your Kit
Once you have your Kit, you'll want to add some fonts. You can browse around by style or by tag. When you find a font you like, click the "Add" link to add it to your current Kit.
After clicking "Add" a new window will pop-up with information about your Kit. This is called the "Kit Editor" and you can manage your fonts for your Kit in this window.
4. Publish your Kit
If you're happy with the font(s) in your Kit, you will need to click "Publish" in your Kit Editor in order for your fonts to be ready to display on your blog.
5. Set up the Typekit embed code in TypePad
Okay, so now you have a Kit and a font in that Kit. To use your Kit on your website, you need some embed code in the HTML head. TypePad will add this embed code automatically! Just go to your blog settings and click on Add-Ons in the left-hand navigation. You'll see a place to add your Kit ID.
Where can you find your Kit ID? Click on Kit Settings in your Kit Editor and you'll see a short ID that you can enter into your TypePad settings. 6. Find your font-family
To use Typekit fonts on TypePad, you'll need to change the font-family attribute in your blog's Custom CSS. Click on the Advanced link in your Kit Editor to get some ideas for how to change the font-family attribute.
For example, I should use "coquette-1" and "coquette-2" in my font-family attribute.
7. Add your fonts to your blog design
Almost done! Now you have your Kit, your font(s), and have configured your font to work with TypePad. The very last step is specifying where you would like your font in your blog design. Would you like the entire blog to be in your custom font? Post titles? Just the blog header?
In order to specify where to apply the font, you'll need to edit your custom CSS. Visit the Design tab for your blog and select "Custom CSS" from the left-hand side.
Then you can specify the font-family attribute that you found in the last step. So if I want my blog header to display my font, for my design I would specify:
After saving my Custom CSS I will see that my blog header has a new font!
Okay, so I'm not actually going to use the Coquette typeface for my blog header... it's just a simple example. You can see which fonts I really use here: http://typekit.com/colophons/syx1hbh
More about TypePad + Typekit: