Using Typekit with WordPress

A little known fact: I love typography.

I love to make things look cool, hip, awesome.

I’m really not a designer though, or a marketing person – I’m just a technician!

But making your fonts look cool doesn’t require a designer or a marketing type person – all you need is one plugin and a few minutes with Typekit.com

In order to get this to work, you need to have a knowledge of 3 things:

  1. Your CSS
  2. Installing plugins
  3. Patience

The first thing you’re going to need to do is sign up for a Typekit account.

Unless you intend to go crazy, the free plan is good enough. Otherwise, the investment might not be a bad idea.

Next up, you need to pick a font. Ask yourself, do you like Serif, Sans Serif, or something else?

Try to maintain some level of professionalism here.

Picking the font is the fun part. Once you pick one, add it to your Kit.

Pause.

The next part is where you need to know your CSS fairly well, or at least have the ability to figure it out.

Play on.

Now that you’ve added your font to your kit, it’s time for a plugin!

You could do this manually, but it’s more of a pain than it’s worth. This plugin is light anyway.

Search for and install “Typekit Fonts for WordPress”.

Once you have that done, head back over to Typekit. We need to grab some code.

To get the embed code, launch your Kit editor by clicking the green button that says “Launch Kit Editor”.

Then click on “Embed Code”.

Copy the code and go back to WordPress.

Expand Settings and click on “Typekit Fonts”.

Paste your embed code in the Embed Code box.

If you notice, I have a few things pasted in the Custom CSS rules box.

I want anything that’s an H1 or H2 to use my Typekit font. Follow that pattern for any section of your page that you want to use your Typekit font.

The other fonts are fall backs for older browsers or browsers that don’t understand CSS rules like that.

That’s it! All there is to it.

With the free version, you’ll have a badge on your site telling other you use Typekit fonts. If you pay, you don’t. I don’t mind it.

Any questions? Hit me up in the comments.

2 Responses to “Using Typekit with WordPress”

  1. Joshua Chase December 13, 2010 at 9:11 am #

    I have been using Typekit for a few months now. Been loving the flexibility. I have had some slowness issues here and there, but overall it’s been an enjoyable experience. Great how to article by the way, keep it up!

    Josh

    • Kev December 20, 2010 at 5:08 pm #

      Thanks Josh!

      Typekit’s been awesome so far…I’m actually considering paying for it.

Leave a Reply:

Gravatar Image