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.
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, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-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”], #access .menu-header, div.menu, #colophon, #branding, #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.
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, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-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”], #access .menu-header, div.menu, #colophon, #branding, #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:
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.