UPDATED:  December 9, 2010
After six months of usage, I cancelled our yearly paid TypeKit account this morning and removed all the fonts from all 13 blogs in the Boles Blogs Network.  I did this for two reasons.  The first is because there is a niggly font rendering problem for iOS 4.2 devices like iPhone and iPad with some fonts that requires you to change how you publish a headline or your name, and you need to add Custom CSS to try to make the workaround work.  I have no interest in sleuthing font solutions across 13 blogs for a service we pay to use.  TypeKit should not have offered inferior font sets to customers that causes this sort of hassle.  The second reason for TypeKit removal is that some of the font sets we were using were adding 100kb to over 225kb to page load times.  That’s just too much cruft to load for too little aesthetic gain, and adding that to the iOS font problems we’ve been haggling over the last couple of days placed the final straw on our back that irretrievably broke our interest in supporting TypeKit on our blogs network.

UPDATED:  July 4, 2010
I spent the afternoon trying to figure out how to code Typekit Fonts into all 14 of my WordPress.com blogs to add some spectacle to the drama of this United Stage blog.  The process isn’t simple or intuitive and since there really isn’t any  step-by-step documentation that I could find to help me, I decided to help myself — and you — by constructing this Typekit walk through for the new default Twenty Ten theme.  You start by going to Typekit.com and signing up for an account.  This afternoon, I purchased the Portfolio option for $50.00USD a year because I have 14 blogs in need of fonting.  If you have one blog, you should be able to get away using the free Trial plan — but you will have to wear a Typekit badge.  You do not have to purchase the CSS upgrade on WordPress.com to get Typekit to work on your blog.

After signing up for your Typekit account, head on over to WordPress.com and go into your administration area.  Head over to “Appearance” and click on “Typekit fonts.”  The Typekit sign up process might have already helped you set up your WordPress.com blog — but if it did not, I will help get you connected.

You will then see this “Your Typekit ID” placeholder waiting for your “Embed Code” from the Typekit site.

Back on the Typekit website, you will need to add your WordPress.com website.  If you haven’t been prompted to do that yet, “Choose Add another kit” from the drop-down sticky menu.

Enter the name of your blog and the domain for your WP.com blog.  I UN-checked the colophon badge.

Click on “Continue” when you’re finished.

You be presented with a JavaScript interface.  Since WordPress.com does not allow JavaScript on our blogs, you won’t need any of that information — but you might want to use it if you have a standalone website or blog.

Click “Continue” to move to the next screen.

Now, you will want to click on the green “Launch Kit Editor” button in the upper right hand corner of your screen.

The next screen will launch an pop-up window.

Don’t click on “Browse all fonts” just yet.

Instead, click on the “Embed Code” link in the upper right corner.

Look at the bottom of the window that pops over and you will see your embed code for Typekit that you need to add to your WordPress.com blog.

I covered my code in red to protect it from public view.

Copy your embed code.

Leave all your Typekit windows active and head back to your WordPress.com blog.  Then paste your embed code in the Typekit ID window and click on “Update ID” to link your WordPress.com blog to Typekit.

If you have more than one blog, you will need to generate new, unique, embed codes for each site.

Now, go back to your open Typekit pop-up window and click on “Kit Settings” in the upper right corner of your screen.

I UN-checked “Include Google Analytics.”

In the “Colophon Settings” screen, I choose not to enable them.

In the “Experimental Features” tab, I initially checked both “Enable iPad support” and ” Enable iPhone/iPod support” — but later learned that Typekit blows up my iPad in nasty and inelegant ways.

I subsequently went back 14 times to UN-check the experimental features and all my blogs once again looked good on my iPad — but without the keen Typekit fonts.

Click on “Save Settings” when you’re done.

Next, go to back to the main Typekit window and start browsing through the font selections.  I prefer fonts with more than one “style” because that seems to render better.

When you find a font you like, click on the green “+ Add to Kit” button and that will move your font selection to the small pop-up kit window you were previously working with to get your embed code.

When you have added the font you like, type “body” into the the typekitEditor window and then click on the “Add” button.

Then click the “Publish” button in the lower right corner of the window.

That will give you a quick way to live test your font in your WordPress.com blog.

Go to your blog and refresh the page.

Here you can see what my initial preview looks like for my Boles University blog.

The screenshot below is rendered to a smaller size to fit this review — so in a real world view, the font is large enough and readable.

If you like the font, continue.

If you do not like the font, go back to your editor window and start the process of adding a different font. You will need to re-add the “body” step and then re-publish Typekit to your blog.

Here’s the fun part where I give you a quick and easy way to get one font setup for your entire Twenty Ten theme for hosting on WordPress.com.

Highlight and copy all the text you see below in the blockquote.  Then, once you’ve picked the font you want, paste all the content below into your typekitEditor “add” window.

content, body, p, h3#comments-title, h3#reply-title, .menu, div.menu ul, -comment-reply-link, .form-allowed-tags, -info, -title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=”submit”], .menu-header, div.menu, #colophon, , #main, #wrapper, blockquote, blockquote cite, blockquote em, blockquote i, body, input, textarea, .page-title span, .pingback a.url, h1, h2, h3, h4, h5, h6

Don’t worry about all this information fitting into that tiny window.  It will work.  Just paste, then click on “Add” — done! — and you’ll be all set to hit the “Publish” button!

Do it now!

You need to wait a few minutes for Typekit to update your blog over the internet.  I found the updates to be almost immediate, but I was working with Typekit on a lazy Sunday afternoon.  You time and tide will vary.  If you are only seeing partial font results, wait awhile and then try again using a different browser.

UPDATE:

I am now using two fonts per blog with Twenty Ten across all 14 network blogs.  I’m using a main font that is perfectly clear and readable for all text — and then I’m using a second font for the “Site Title” an “Entry Title” just to give each blog its own pizzaz and aesthetic personality.  Here’s how to use two Typekit fonts.

First, add the main font you want to use for most of your text to your Typekit, then copy and past the following found int he blockquote below:

content, body, p, h3#comments-title, h3#reply-title, .menu, div.menu ul, -comment-reply-link, .form-allowed-tags, -info, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=”submit”], .menu-header, div.menu, #colophon, , #main, #wrapper, blockquote, blockquote cite, blockquote em, blockquote i, body, input, textarea, .page-title span, .pingback a.url, h3, h4, h5, h6

Next, add the font you want to use for your Site Title and Entry Title.  Then add the following selectors found the the blockquote below:

#site-title, h1, .entry-title, h2

Note:  If you are adding a second font after you’ve already styled your blog with a single font as mentioned here earlier, make sure you delete the “second font selectors” in the blockquote directly above from your first font or the styling will be confused.

Save your updated fonts choices and you’re done!

Note that some browsers like to hang onto blog font formatting even when you do a hard refresh or clear the cache.  Firefox and Safari are two of them.  Chrome seems better behaved when you force a page refresh in its ability to find the new things waiting for presentation.

Beware that if you decide to use a different font, and if you delete the font you associated with all that material in the blockquote, you will have to re-add all the information to connect it to the new font in your typekitEditor window.

You can style each of those blockquote items above with different fonts.  Just add new fonts and then choose which things in the blockquote you want to be associated with that font.  Make sure you only associate one “added” element with one font or you risk getting a mixed up mess.

My suggestion is if you are new to this sort of thing — just pick a single font for now, copy and paste and add my blockquote material — and let Typekit and WordPress.com work out the rest of it for you.  That’s what I did, and it just works.

The blockquote material above was tested by me one-by-one to see what worked and what did not work.  It took me forever to figure out that getting the post titles and widget titles to take up the Typekit formatting using the Twenty Ten theme, required adding “content” as a standalone entry.

Also, beware that this information is accurate — as of June 27, 2010 — and please know both WordPress.com and Typekit will make changes in the future that will likely necessitate the addition or subtraction of certain elements for formatting.

Here are the results of my Typekit formatting forays today — and remember, all these examples have been downsized to fit in the image area for this review — so they look better in real life.  Click on the blog links to see updated views.

Here is Panopticonic.com:

UnitedStage.com:

BolesBlues.com:

CarceralNation.com:

10txt.com:

CelebritySemiotic.com:

WordPunk.com:

RelationShaping.com:

UrbanSemiotic.com:

DramaticMedicine.com:

ScientificAesthetic.com:

Memeingful:

Blog.BolesUniversity.com:

BolesBlogs.net — Private Staff Blog:

Yes, the Private Staff blog test area is font silly and styling obnoxious — but so are the Staff!

I realize some of those font examples are a little wild, I don’t mind that so much — I think they’re all generally readable and have a righteous aesthetic — and I have now given each network blog its own, unique, font look with Typekit.

I notice that when I load my blogs, there is a strange sort of default font that shows up that is then followed by the Typekit fonts.  That’s sort of a strange feeling that I’m not sure can be cured — unless there’s some sort of CSS solution I might be able to add to alleviate those slow font substitution loads.

I hope this quick tutorial helped you find a way into Typekit and your WordPress.com blog — the initial experience might be a little scary and overwhelming — but keep trying, and let me know if you need help with the Twenty Ten theme.  I’m happy to do what I can to assist you, but if you’re using a theme other than Twenty Ten — then I will not likely be able to be of much assistance.

Typekit is powerful fun and combining that delight with blogging on the strategic WordPress.com platform gives you an even more robust way to bring your unique message to the light of many friendly and awesome eyes.

56 Comments

  2. Yeah, thanks for that very good tutorial since you really break it down. Kinda like Typekit for dummies 🙂

    Unfortunately, it seems to me that the only way to really be able to use Typekit font on WordPress.com is to have a CSS paid upgrade. The Typekit fonts look super-TINY for some reason, and it’s only via the CSS upgrade that you can fix that for the entire blog. Or one can labor on writing HTML on each post to increase font size. It’s easy to do that for new posts, but what about the old published ones? yikes

    Of course viewers can always magnify the blog via their browsers to be able to read the blog proper, but based on my experience, they’ll be more liable to just click away since the fonts look too small (rather than exert the effort to try to magnify).

    1. Hi RandomizeME, and thanks for the great comment!

      Perhaps we can try to clear up some things that are definitely confusing.

      There seems to be a lot of confusion about Typekit and WP.com.

      I don’t see anywhere in the official WordPress.com online documentation that says you have to have the paid CSS upgrade for Typekit to work on your blog. I do have the CSS upgrade for my blogs, but my CSS edits are unchanged after the Typekit connection.

      Here’s a WordPress.com support thread concerning an established theme:

      http://en.forums.wordpress.com/topic/adding-typekit-fonts-to-paperpunch?replies=17#post-468749.

      There’s no mention from WP Support in that thread about having to pay for the CSS upgrade, and when you enter your embed code on WordPress.com there’s no mention that you have to purchase anything extra from WordPress.com. It doesn’t make sense you’d have to pay for the CSS upgrade for Typekit for all the themes but Paperpunch. In fact, the limitations of using Typekit for free are exactly matched by the two fonts mentioned in that support thread.

      I think the tiny font problem — I had that, too, and I fixed it by using a different font — is related to the theme you’re using and if you’re using a Typekit font that doesn’t have enough range of Styles to fit an entire blog. I’d pick a font that has at least 4 styles if you’re using a single font to style everything on your blog. A single style font is more for exclusive use, in my experience, like for a fancy headline.

      You don’t have to edit every post to get Typekit to work on your blog.

      You can use Typekit for free on one blog with two fonts. If you want more fonts or to use Typekit on more than one blog, you have to pay Typekit, not WordPress.com.

  3. Pingback: Tweets that mention The Typekit Fonts Tutorial for WordPress.com | United Stage -- Topsy.com

  5. Hi David,

    I notice that when I load my blogs, there is a strange sort of default font that shows up that is then followed by the Typekit fonts. That’s sort of a strange feeling that I’m not sure can be cured — unless there’s some sort of CSS solution I might be able to add to alleviate those slow font substitution loads.

    This delay happens because font loading takes a small amount of time. Different browsers handle the wait differently; some, like the one you’re using, show substitute fonts while the ideal choice is loading, while others hide all fonts until the top choice arrives.

    Typekit recently collaborated with Google to release WebFont Loader, a small bit of JavaScript that gives web designers control over what their pages look like while fonts are loading. Give it a try!

    Tim

    1. Hi Tim from Typekit!

      Thanks for the reply. I’m using the latest Firefox for Mac, and yes, I’m seeing the ugly font substitutions load before the font I want to load is visible. I guess that’s the price we pay for iPad and iPhone web compatibility.

      Unfortunately, your neat WebFont loader is not a solution for WordPress.com hosted blogs. We can’t run JavaScript. We can only add CSS options if we have the upgrade — I do — and we do not have access to any core HTML files for our themes.

      Any other suggestions?

      1. Oh right. I’m sorry. It’ll be a short while, but we plan to build WebFont Loader right into the Typekit embed code (in which case it will work for WP.com hosted blogs). Meanwhile, you should be able to use Typekit Font Events — the precursor to WebFont Loader.

        1. Hi Tim —

          When you build the WebFont loader into the Typekit embed code — will we need to re-save our kits for each blog? Or will the update automatically be delivered to our blogs without any further intervention?

          I looked at the Typekit Font Events and the page you provided — I took the CSS code and tried to save it in the CSS Editor for this blog and WP.com and that code was stripped out.

          Can you provide a more direct steps list for how to implement this temporary fix?

          What is the ETA on the delivery of the WebFont Loader so it will work with WP.com?

          Thanks!

  6. UPDATE:

    For some reason I lost all my Typekit fonts in Firefox for Mac this morning.

    I checked on Safari and Chrome. All Typekit fonts were fine.

    It took me a good five minutes to figure out that I had to allow “typekit.com” as a trusted site for NoScript —

    https://addons.mozilla.org/en-US/firefox/addon/722/

    — if Typekit fonts suddenly disappear on your site without any good reason, look for a blocking mechanism in your web browser, and then be sure to Whitelist “typekit.com” as a trusted website.

  7. UPDATE:

    I re-enabled the “experimental” Typekit support for iPhone and iPad. It’s working on both OS3 and OS4. Looks really good.

    iPad support is still not enabled — it is still crashing Safari really hard.

  8. UPDATE:

    I think I’ve changed all the Typekit fonts for all the blogs except http://BolesBlues.com since I wrote this article. One of the great things about using Typekit on WordPress.com is the ability to change your aesthetic look and feel on a whim.

    Be sure to click through to all the other Boles Network Blogs to see the new — and I know, improved — font choices.

    Thank you!

  9. Pingback: Twenty Ten Rotating Image Header Tutorial for WordPress.com | RelationShaping

  11. Thank you so much for this! I struggled for an hour trying to figure out how to do exactly this. Your copy & paste code was INVALUABLE!!! It worked perfectly for me 🙂

  12. Thank you! This was so incredibly helpful. I nearly gave up on using Typekit altogether.

    1. Hi Kristin!

      Welcome to United Stage!

      Yes, I almost gave up on TypeKit, too. It can be a little frustrating at the start because every theme is different and picking the right pieces for “TypeKitting” can be a challenge. I spent a lot of trial and error time until I came upon the solution.

      Your blog looks great! Love that font! I think I’m using a similar one on http://CarceralNation.com

  13. Thanks for the tutorial. Just FYI, the only part I needed today was the list of selectors. I am *very* grateful to you for this list, but may I suggest adding a link to it at the top of the blog post for those who are looking for it specifically? I kept scrolling down and down to find it. If you wouldn’t mind, I might like to add a post to my own blog with just the list of selectors and give you credit for compiling the list. I’m sure there are many people who need your entire tutorial, but I imagine there are others like me who figured it all out except for the selectors they needed to input.

    P.S. It’s a shame that Typekit haven’t updated their list of themes from the “Tell us what theme you’re using list.” Twenty ten has been around since April 2010, and it’s not yet on the list while there are themes on the list that don’t exist anymore.

    1. Thank you for your kind and supportive message, Daniel.

      Yes, my tutorial is basic and simple — I’m sure you could do a fine job on a more advanced one.

      I’m not sure why the TypeKit folk haven’t updated their list of supported themes. Have you visited their support forum to ask?

  14. Pingback: The Typekit Fonts Tutorial for WordPress.com (via United Stage) | Just Singin’ & Signin’ in the Sun

  15. Thanks for posting this! The list of selectors was extremely helpful.

    This is the kind of tutorial typekit should post on their website. It makes sense once you get it, but they do an awful job of explaining what you actually need to do to get the fonts working, what the selectors are, etc…

    1. Hi DGS!

      Thanks for the kind words. That means a lot to me.

      I agree these selectors are terribly confusing — and they’re generally non-standardized from theme to theme on WordPress.com — so you really have to work and experiment and find what works and what doesn’t.

      Love the look of your blog! The black and white is stunning. Your font choices are outstanding.

  16. I cannot see anything inside my WP site that says typekit. I signed up, I got the code, I loggedin and out of the WP site and I checked all areas, plugins, etc. nothing shows me a place labled typekit, nor an area to enter my embed code. I am clueless on how to get the site to find integrate it. I am using twenty ten as well!! I am using bluehost if that matters as my host.
    Thanks,
    Linda

  17. Thanks man! Everything worked flawlessly! Though Typekit hasn’t yet updated my Blog with the new fonts, I think it will in a few more minutes.

  18. Pingback: Drama of the Textual Aesthetic and the New York Times | United Stage
  19. Pingback: Do You Know About.Me? | Memeingful
  21. Pingback: DairyCat on the Dash: Illustrated Adventures with Mega Meg, and finding a Blogging Buddy « The Adventures of MegaMeg!

  22. Hi im working on twentyten and there is no typekit in the apperance panel. I have signed up for typekit do i have to do something to make it appear in the apperance tab.
    …Thanks for tutorial

        1. Ah! That’s the problem. The tutorial is for WordPress.com blogs. You might want to head over to the general WordPress.org support forum for more specific help on the install. Good luck!

  23. Hi there,

    Thank you for this tutorial! There is absolutely nothing on the Typekit site to explain how to do this in detail. I needed to add a few extra ‘selectors’ but got there in the end. Now I just need to experiment more!

    Cheers!

  24. Wow ‘o wow, thank you! I googled SO many different variations, trying to find out how I could edit the HTML in WordPress (thinking I could, and had to) — thank GOODNESS for your blog & these instructions. You are a life saver David, thank you!

  25. Pingback: 2011 WordPress.com Wants After One Year of Hosting 14 Network Blogs | Go Inside Magazine
  26. Pingback: Using Typekit Fonts in Wordpress | Zak Suhar

  27. Just the thing I was looking for…a complete list of the tags, classes and ids to run one font, in 6 styles, over my entire blog. Found not much help from WordPress.com’s support, that blockquote is a real humdinger. Thanks very much for sharing all your hard work with others.

  28. I am using a wordpress.com site with the bueno theme, and there is absolutely no “typekit fonts” tab anywhere that I can find. Should the tab be there for all themes? The only thing I haven’t done that typekit has mentioned is install the javascript code – I have nowhere to install it without enabling the CSS upgrade because I can’t enter coding anywhere! I’m pretty much ready to give up on typekit, which sucks so much because I really love bueno but the header font is so ugly 🙁

    1. You might want to check with WP.com support to see Typekit fonts are still free or if they’re now part of the $30 customization bundle.

  29. Pingback: How to Migrate Your Blogs from WordPress.com to WordPress Multisite on Pair Networks VPS | Panopticonic
  30. Pingback: New iPads Arrive: Typekit Fonts Now a Blogging Necessity | WordPunk
  31. Pingback: Boles Blogs Browser Wars: Chrome vs. Firefox vs. Safari « Boles Blogs

Comments are closed.