Typekit, as they say on their website, are the easiest way to use real fonts on web. Not so much when to comes to your WP.com blog. Yes, a few of the WP.com themes are directly supported by Typekit so you don’t have to use any code at all. But, for a majority of the themes you have to work all of that by yourself. Thankfully, they have a great support staff. Here’s what I learnt through the process. For the first category of themes, i.e. supported by Typekit directly (without coding), just check out this link from their support page – Using Typekit with WordPress.com. If you are lucky, your theme will be listed there.
If you aren’t that lucky, you will have to put in an extra bit of effort.
Roll up your sleeves. (Relax, it isn’t that tough.. ;P )
For starters, I suggest you to read through the guide (Using Typekit with WordPress.com) but only till the point where you have to choose your theme. The guide is not applicable to you beyond that, since your theme doesn’t exist in those directly supported.
If you followed the guide till that point, you will see your kit editor as seen on the right instead of the one on the left. i.e. if your theme is not supported. If your kit editor looks like the one on left, you theme is directly supported by typekit. Cheers. Just select the options and get going.
(How to open the Kit editor? Go to Typekit.com, sign in and Launch your Kit Editor (top-right corner))
For indirectly supported themes, the Page elements don’t exist. Hence, we need to use selectors to achieve the same effect. (The selectors section is basically to add some CSS Selectors to your Kit so that Typekit knows which elements of your blog you want to add the fonts to.)
The difficult part here is that you need to know the selectors for your blog’s theme.
A few Selectors for the STRUCTURE theme.
|#content .textbanner a||Headline on homepage|
|#content .posttitle h3||Post Titles|
|#content p||Post and Body Text|
|#content .widget h4||Sidebar Headers|
|#content .widget ul li a||Sidebar Links|
|#content .widget||Sidebar Body Text|
|#footertop||Top Footer Section|
|#footer||Bottom Footer Section|
|#footertop h4||Footer Headers|
A few Selectors for the DUSTER theme
|.showcase-heading||The “FEATURED TEXT” headers|
|.widget-area .widget-title||Sidebar Headers|
|#content .entry-content p||Post Body Text|
|.entry-summary||Featured Post Excerpt|
Now, considering that I have to change the Headline on my homepage (theme: Structure), I will use the following css selector:
[sourcecode language="css" gutter="false"]#content .textbanner a[/sourcecode]
In the Kit editor’s left column, you’ll see the Selectors section. Type the above code exactly and click on ‘Add‘.
Next, Click “Publish” to republish your Kit. You’ll need to do this to see the changes on your blog.
In case, you witness no change on your blog, you may try this as well – Update the domains in your Kit. To do this, click “Kit Settings” in the upper right corner of the kit editor. Change the domain to: yourblogname.wordpress.com in the domains field and click “Save Settings“. Then republish your Kit.
You should see the changes now. Cheers!
If you don’t know the css selectors for your theme, use a Firefox add-on named Firebug which will assist you in finding the css selectors for your theme. If you are still unable to determine the css selectors for your theme, write to the typekit support requesting them help you determine the theme’s css selectors. The support staff is great. (Thank you Benjamin Welch )
There is one more thing to remember, Typekit changes only the fonts. Not their size.
and yeah, if your theme is different than the ones mentioned and you have figured out the CSS selectors for your theme, it would be great if you could share those selectors with others. You can simply mention them in your comments. That would help others a lot. Thanks.
If you find any broken links, please notify us by leaving a comment.
Read more posts related to blogging on WordPress.com
Featured Image inspired by JoelK75|Flickr