Customize your WordPress blog with Typekit fonts
Got a blog at WordPress.com? Now you can use Typekit! We’ve just rolled out a way to easily use fonts on the world’s largest blogging platform. With Typekit and WordPress working together, customizing the look of the nearly 10 million blogs they host now takes just a few clicks.
Log into your WordPress dashboard and click on Appearance in the left-hand navbar. There, you’ll find “Typekit Fonts” with a place to add your Kit ID (available under “Embed Code” in the Typekit Editor). That’s it — you’re ready to go. You can choose fonts from our rapidly growing library to add them to any of the WordPress themes to give your blog a distinct look.
And of course, Typekit works with WordPress blogs you host yourself. That’s getting easier as well, now that the WordPress developer community has begun to release plugins for Typekit. Check out the options over at the plugin directory.
49 Responses
Comments are closed.
Good job guys. That’s a huge move. Good type on the web everywhere is quickly becoming in our reach!
Wow great news. Can’t wait to give this a go.
and I was just browsing your site today! well done. Good design is coming within reach of the masses.
This is outstanding news. Typography, ahoy!
Just wanted to point out that there’s also a WordPress plugin for the self-hosted version of WordPress for Typekit and it also works with WordPress MU: http://wpmu.org/typekit-for-wpmu-%E2%80%93-new-free-plugin-available/
Tumblr next, please 🙂
Great! 🙂
This is gr8 news to hear about, i think it’s more than a GIFT from SANTA on this X-MAX…..merry christmas to you all there…keep it up guys you are doing great deed…….:)
That’s good news
Great set! Thanks for these! TypeKit is a great example! Thanks!
Bless You!!! I thought I was going to have to learn html or something. This is wonderful news!!!!
very thanks.. i’ll download the plugin…
good news…
A big step. Congrats.
Sorry don’ take it bad (i don’t have any regret to pay for Typekit :)) but i think this 2 plugins do not have a practical value to WordPress, it enable you to activate the script or not.
It would be great if you could t pick up and manage the fonts library trough WP , and especially enable the script with a check box when you write a post/page, in order to avoid 800k (example) during the page load.
Going to give it a try on http://corettajackson.com!
Do the typekit fonts cover non english characters?
I am interested in classical Greek fonts.
Thanks in advance.
Not yet. We’re working on supporting expanded character sets and should have some changes to announce soon.
I am surly gonna have a try! Thanks for this post!
doesn’t work for my site.
I can not even kind of get this to work on my wordpress. I put the ID thing in but… then what? I’ve explored both sights until my eyes burned. I don’t get it!! I’ve tried everything I know how to do. Can someone point me to some directions for a pc/firefox/wordpress. It looks like it should be simple but I honestly can not figure it out. — AND if anyone knows how I can get rid of the black on my page I would appreciate that too. I used a theme so my header would be centered and orange like I wanted but I HATE the black.
If you are having trouble getting things set up, drop us a line and we’ll be happy to help.
It doesn’t work on my site either and I’m not sure why. It’s very frustrating.
I assume you mean the WordPress plugin (either self-hosted or at wordpress.com). I’ve had good luck with Typekit in general but haven’t tried these plugins yet. One thing to make certain of is to check to make certain your browser is supported. I believe Chrome and Safari are not yet supported. Beyond that, you should follow up through the regular support site – http://getsatisfaction.com/typekit/
I have not been able to use Typekit yet (new blogger), though I’ve tried. I have Windows Vista and use Internet Explorer, so was surprised that this browser was not supported.
Anything I can do in the meantime?
Thanks!
I can’t make this work. It’s useless.
Works for me. Tried it on a WordPress.com site without issue.
Things to remember:
1. Publish the type kit.
2. Make certain you have fonts hooked to classes/ids
3. Make certain you have the correct type kit id entered in the plugin
4. Make certain you aren’t using Chrome/Safari to view the site.
Thanks for posting that, David. Those are the steps to try. We’ve also written some notes about our WordPress integration here:
http://typekit.com/help/wordpress
BTW, the latest beta release of Chrome supports @font-face. As has Safari for a while now.
Please help, Typekit!
I’m a little lost: In the http://typekit.com/help/wordpress link (from the Jan. 13 post above) it reads:
You can do that by opening up the Typekit Editor and clicking on Embed Code. Copy the Kit ID and paste it in the appropriate place in.
I have a typekit ID according to “Typekit Fonts” under “Appearance” from WordPress, BUT WHERE IS THIS “TYPEKIT EDITOR”, that I’m supposed to paste the ID into? I don’t see it anywhere on your site, or on WordPress.
Would love your product if I could figure it out. I think your WordPress help instructions need a serious overhaul.
Hi Billy, I’m having the same problem. Did you ever get resolution?
You have to go to the Embeded Code. To get there, you have to first click on the font you want. Then a window will pop up. Finally, go to the “Embeded Code” section (in the top right hand corner) and the code should be there!
Hope this helps.
A really informative blog, in deed. Foundries and casting industry are such which can be never set. Foundries in India are some of the high capacity foundries in the world.
I got it to work on my free WordPress blog…kind of..
It works on the front page, but when i click on a post all the fonts have gone back to how they were. When you choose the domain name of your blog, should it appear on ALL pages of your blog?
I wrote a blog post about my trial of Typekit fonts: Why I’m not using Typekit Fonts yet
What a shame.. once again, those “geek-developers” with advanced technical knowledge just cannot find a way, or condescend to actually explain how things work. I know basic CSS, but that is no the problem here…Ran into a 10 glitches and no help anywhere to solve them. Cant get the fonts on the sidebars, headers, etc. only in the body of the blog. The control panel doesn’t even show up—have to use the two plug-ins which are rudimentary and also without explanation.
wow..that’s a good news..i can’t waiting to display it
Support is pretty much non-existent isnt it…
I wont upgrade to a paid account since TK cant bother to answer some simple, basic enquiries. Check the blogs around the internet. Soooo much confusion and difficulty in getting the fonts to work, SIMPLY because of a lack of instruction…
Make a product and then dont explain, and dont respond? starnge indeed.
Asa, you’re absolutely right. There’s some confusion surrounding our WordPress integration. We should refine our instructions in spots, but the way Typekit connects with WordPress right now can also be a labor-intensive feature for some users. We’re working on a really simple, intuitive new integration that I think will make many folks happy.
Meanwhile, I’m so sorry to have left you hanging. I’m replying to your ticket now, but the short answer is that for WordPress.org blogs, you’ll need a plugin. Our Typekit + WordPress instructions are only relevant for WordPress.com blogs.
Hi there, I simply published in order to say hey. Your blog is nice seeing that I personally use this for the purpose of my personal homework for college.Its bright and bright colored. I go along with the preceding commentor incidentally.Excellent blog post but will visit now and again
Do I need a plugin to get Appearance > Typekit to show up? I am working with a client’s 3.0.1 installation and there’s no Typekit under Appearance.
The above instructions apply to WordPress.com. There are some plugins for WordPress.org; or else you can add the Typekit embed code to your template head.
You can get Typekit to work in ANY WordPress website… But dont rely on their useless control panel, which doesnt even show up on ANY of my WordPress site dashbaords.
You need to install TYPEKIT FONTS in your WordPress.
This control panel will show up on SETTINGS panel in WordPress.
With this nifty plug-in, you can put in all the css modifiers you want. I modify everything: menu, block headers, sidebars, etc.
To find your specific CSS big pain though, because there is not “standard” nomenclature in WordPress.
In Firefox, get the DEVELOPER TOOLS add-on and install it in Firefox (its free). Then with you webpage open, you can use the menubar in developer tools to see EXACTLY the css name of your headers, text body, block headers, menu, you name it!
TypeKit themseleves are HORRIFIC as far as explaining anything or providing support. It would be SIMPLE to put a really helpful how-to together, but they just dont bother! Life is strange and people stranger.
For examples of my customization with Trajan and my favorite, Adelle..
see http://www.damaruworks.com
Some of my CSS is below, but you will need your own modifiers.. like I said, every THEME has a different stupid name for its headers, etc..
.art-menu a .t { font-family: “trajan-pro-1″,”trajan-pro-2”; font-size: 14px; font-weight: normal}
div.art-PostContent p {font-family: “adelle-1″,”adelle-2”; font-size: 13px; font-weight: normal}
div.art-PostContent ul li {font-family: “adelle-1″,”adelle-2”; font-size: 13px; font-weight: normal}
h1 { font-family: “trajan-pro-1″,”trajan-pro-2”; font-size: 16 px }
h2 { font-family: “trajan-pro-1″,”trajan-pro-2”; font-size: 14 px }
h3 { font-family: “adelle-1″,”adelle-2”; font-size: 16 px; font-style: italic}
div.art-PostHeader a:link {font-family: “trajan-pro-1″,”trajan-pro-2” }
Hi, just coming in through from the WordPress.com support forums where we are now confused about the current TypeKit support doc for WordPress.com, which seems to imply that only a few WP.com themes are supported. Here’s the link: http://typekit.assistly.com/customer/portal/articles/6840-Using-Typekit-with-WordPress-com
Those are the only themes that are supported via the custom Kit Editor which doesn’t require any coding. You can use Typekit with any other theme provided you are comfortable with HTML and CSS. If you need help, just drop a line to support@typekit.com.
True, but is supports ALL themes on WordPress.ORG.. which is all professional blogs or websites.. I make my own themes in Artisteer (much better than buying new themes all the time from others!) and they all get customized with Typekit (see my ealier port for examples of the CSS).
Thanks Mandy. Both Pressrow and Cutline are no longer available on WordPress.com, replaced by Pilcrow and Coraline. Typekit may want to have a look at the new WordPress.com Theme Showcase for the most popular themes. Thanks and cheers!
Mandy, I’m sorry, but it is unacceptable for a company like yours to charge a minimum of $25 a year for a service (more than I pay for my WordPress.com blog) and not keep it up to date. It’s been months since WordPress changed its most popular themes, and yet your response continues to be “if you need help, just drop us a line.” I use Coraline, one of the top themes that came out in August 2010, and you still haven’t updated the Kit Editor to support it– oh, wait, I just checked and now I see it– five months after it came out. I used TwentyTen before that, which came out in June 2010, and you still haven’t added that to the Kit Editor. When I did once email you to ask for all the selectors I needed, you (or someone else there) said something to the effect of, “You should just be able to declare selectors for HTML and BODY and have them cascade from there.” Would that it were so simple!
I moved my blogs from self-hosted WordPress.org to WordPress.com to simplify my blogging and not have to spend hours on installations. Now I’ve spent hours on TypeKit trying to get it right. For $25 a year and more, I should have to spend so much time on this. You and your people should spend those hours yourselves updating your Kit Editor so the paying public can simply use what they paid for and get on with their blogging.
I’m sorry this has been frustrating for you. We are hard at work on an improved implementation for WordPress. We also have a series of updates to the new themes planned for release this week. As always, if you need help finding a particular selector, you need only write support@typekit.com and we will be happy to assist.
Frustrated! Ive tried everythign and spent hours and hours trying to figure this out. I have finally given up! where on earth does one embed the code, please, where exactly does it go?
The Typekit Kit ID is placed in WordPress under Appearance > Typekit fonts. If you need help, drop a line to support@typekit.com.