How To: Typekit for wordpress

Thu, Dec 24, 2009

Latest Tech

How To: Typekit for wordpress

“Typekit is the easiest way to use real fonts on the web. It’s a subscription-based service for linking to high-quality Open Type fonts from some of the worlds best type foundries. The fonts are served from a global network on redundant servers, offering bulletproof service and incredible speed. And it couldn’t be easier to use.”

More about who they are and what they do -> typekit

This is a simple tutorial on how to use TypeKit on your wordpress.org blog. We gonna end up having a single font everywhere in the site.

Step 1. Select a plan. You can try it for free. The free trial has a limit of 5GB/month along with the other limitations.
typekit-plans-wordpress

Step 2. Your site details. Urls should include your subdomains as well.
typekit-urls-wordpress



Step 3. Copy the Javascript code. You can access it later as well. DONT paste it in the like its told there. We will do that later.

Step 4. Download the TypeKit Wordpress plugin. Install and activate it in your wordpress blog.

Step 5. Add the fonts you like.
typekit-fonts-wordpress

Step 6. Add selectors of the places where you want the new font to be applied. You need to know your theme css to understand what all you want included. If you want the new font everywhere, you can add h1, h2, h3, h4, h5, h6 & body. This works for me, but it really depends on the theme. Dont forget to click on publish.
typekit-selectors-wordpress

Step 7. Wordpress dashboard now. Go to Settings-> Typekit Fonts. Copy-Paste the code that you got in Step 3. If you didnt copy it then; you can get it by clicking on ‘Launch Kit Editor’ (top right after you login) and in the next pop up window ‘Embed Code’. Click on Save Settings. Done.

#1. Custom CSS rules section wont have anything if you want the same font everywhere in your theme.

#2. If you want different fonts in different places, its almost same. Just select different fonts for different ids – h1, h2, .. [step 6] I havent tried this, but guess this is how it will work.

#3. You can get more support @ TypeKit Support | twitter – @typekit

#4. You can also use it on your wordpress.com blog – Link

I really hope more people understand the power of good typography. It can make or break a design. My blog where i tried this – http://NokiaN97Blog.Com

30 mins later: Ah. Now that i have typed the whole thing, i realise that there wasnt any need for this post. Its just too easy! :|

Related:

  1. SEO for new (wordpress) bloggers
  2. Conditional tags in Wordpress
  3. How To: Add new sidebar #WP
  4. Do Not Disturb
  5. First steps on Twitter

,

2 Responses to “How To: Typekit for wordpress”

  1. mara Says:

    omg thank you (this idiot could not figure it out)

    Reply

  2. raywilliamjohnson Says:

    thanks but i'm can't make it work..

    Reply


Leave a Reply

PHVsPjxsaT48c3Ryb25nPndvb19hZHNfcm90YXRlPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkXzMwMF9hZHNlbnNlPC9zdHJvbmc+IC0gPHNjcmlwdCB0eXBlPVwidGV4dC9qYXZhc2NyaXB0XCI+PCEtLQ0KZ29vZ2xlX2FkX2NsaWVudCA9IFwicHViLTEyNTE1ODUzOTgzMjE3MzhcIjsNCi8qIDMwMHgyNTAsIChvbmx1a2VyKWNyZWF0ZWQgMTMvMDYvMDggKi8NCmdvb2dsZV9hZF9zbG90ID0gXCI2NjgzNTI3NjU3XCI7DQpnb29nbGVfYWRfd2lkdGggPSAzMDA7DQpnb29nbGVfYWRfaGVpZ2h0ID0gMjUwOw0KLy8tLT4NCjwvc2NyaXB0Pg0KPHNjcmlwdCB0eXBlPVwidGV4dC9qYXZhc2NyaXB0XCINCnNyYz1cImh0dHA6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvc2hvd19hZHMuanNcIj4NCjwvc2NyaXB0PjwvbGk+PGxpPjxzdHJvbmc+d29vX2FkXzMwMF9pbWFnZTwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS9hZHMvd29vdGhlbWVzLTMwMHgyNTAtMi5naWY8L2xpPjxsaT48c3Ryb25nPndvb19hZF8zMDBfdXJsPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWRfaW1hZ2VfMTwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS9hZHMvd29vdGhlbWVzLTEyNXgxMjUtMS5naWY8L2xpPjxsaT48c3Ryb25nPndvb19hZF9pbWFnZV8yPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy93b290aGVtZXMtMTI1eDEyNS0yLmdpZjwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzM8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzL3dvb3RoZW1lcy0xMjV4MTI1LTMuZ2lmPC9saT48bGk+PHN0cm9uZz53b29fYWRfaW1hZ2VfNDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS9hZHMvd29vdGhlbWVzLTEyNXgxMjUtNC5naWY8L2xpPjxsaT48c3Ryb25nPndvb19hZF9pbWFnZV81PC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy93b290aGVtZXMtMTI1eDEyNS00LmdpZjwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzY8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzL3dvb3RoZW1lcy0xMjV4MTI1LTQuZ2lmPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzE8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMjwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF8zPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzQ8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfNTwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF82PC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWx0X3N0eWxlc2hlZXQ8L3N0cm9uZz4gLSA4LWJsYWNrbmJsdWUuY3NzPC9saT48bGk+PHN0cm9uZz53b29fYXNpZGVzX2NhdGVnb3J5PC9zdHJvbmc+IC0gU2VsZWN0IGEgY2F0ZWdvcnk6PC9saT48bGk+PHN0cm9uZz53b29fYXV0aG9yPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19hdXRvX2ltZzwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY29udGVudDwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY29udGVudF9mZWF0PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fZmF2aWNvbjwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlYXR1cmVkX3Bvc3RzPC9zdHJvbmc+IC0gODwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlYXRfaW1hZ2VfaGVpZ2h0PC9zdHJvbmc+IC0gMTk1PC9saT48bGk+PHN0cm9uZz53b29fZmVhdF9pbWFnZV93aWR0aDwvc3Ryb25nPiAtIDU0MDwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlZWRidXJuZXJfaWQ8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19mZWVkYnVybmVyX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly9mZWVkcy5mZWVkYnVybmVyLmNvbS9Pbmx1a2VyQ29tPC9saT48bGk+PHN0cm9uZz53b29fZ29vZ2xlX2FuYWx5dGljczwvc3Ryb25nPiAtIDxzY3JpcHQgdHlwZT1cInRleHQvamF2YXNjcmlwdFwiPg0KDQogIHZhciBfZ2FxID0gX2dhcSB8fCBbXTsNCiAgX2dhcS5wdXNoKFtcJ19zZXRBY2NvdW50XCcsIFwnVUEtNDU2MjUwNC0zXCddKTsNCiAgX2dhcS5wdXNoKFtcJ190cmFja1BhZ2V2aWV3XCddKTsNCg0KICAoZnVuY3Rpb24oKSB7DQogICAgdmFyIGdhID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudChcJ3NjcmlwdFwnKTsgZ2EudHlwZSA9IFwndGV4dC9qYXZhc2NyaXB0XCc7IGdhLmFzeW5jID0gdHJ1ZTsNCiAgICBnYS5zcmMgPSAoXCdodHRwczpcJyA9PSBkb2N1bWVudC5sb2NhdGlvbi5wcm90b2NvbCA/IFwnaHR0cHM6Ly9zc2xcJyA6IFwnaHR0cDovL3d3d1wnKSArIFwnLmdvb2dsZS1hbmFseXRpY3MuY29tL2dhLmpzXCc7DQogICAgdmFyIHMgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZShcJ3NjcmlwdFwnKVswXTsgcy5wYXJlbnROb2RlLmluc2VydEJlZm9yZShnYSwgcyk7DQogIH0pKCk7DQoNCjwvc2NyaXB0PjwvbGk+PGxpPjxzdHJvbmc+d29vX2hvbWVfb25lX2NvbDwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29faW1hZ2Vfc2luZ2xlPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19sb2dvPC9zdHJvbmc+IC0gaHR0cDovL29ubHVrZXIuY29tL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvNi1sb2dvLTMucG5nPC9saT48bGk+PHN0cm9uZz53b29fbWFudWFsPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL3N1cHBvcnQvdGhlbWUtZG9jdW1lbnRhdGlvbi9mcmVzaC1uZXdzLzwvbGk+PGxpPjxzdHJvbmc+d29vX3Jlc2l6ZTwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19zaG9ydG5hbWU8L3N0cm9uZz4gLSB3b288L2xpPjxsaT48c3Ryb25nPndvb19zaW5nbGVfaW1hZ2VfaGVpZ2h0PC9zdHJvbmc+IC0gMTAwPC9saT48bGk+PHN0cm9uZz53b29fc2luZ2xlX2ltYWdlX3dpZHRoPC9zdHJvbmc+IC0gMTAwPC9saT48bGk+PHN0cm9uZz53b29fdGFiczwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fdGhlbWVuYW1lPC9zdHJvbmc+IC0gRnJlc2ggTmV3czwvbGk+PGxpPjxzdHJvbmc+d29vX3RodW1iX2ltYWdlX2hlaWdodDwvc3Ryb25nPiAtIDExMDwvbGk+PGxpPjxzdHJvbmc+d29vX3RodW1iX2ltYWdlX3dpZHRoPC9zdHJvbmc+IC0gMTEwPC9saT48bGk+PHN0cm9uZz53b29fdXBsb2Fkczwvc3Ryb25nPiAtIGE6NDp7aTowO3M6NTQ6Imh0dHA6Ly9vbmx1a2VyLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzYtbG9nby0zLnBuZyI7aToxO3M6NTQ6Imh0dHA6Ly9vbmx1a2VyLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzUtbG9nby0yLnBuZyI7aToyO3M6NTQ6Imh0dHA6Ly9vbmx1a2VyLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzQtbG9nby0xLnBuZyI7aTozO3M6NDk6Imh0dHA6Ly9vbmx1a2VyLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzMtNC5naWYiO308L2xpPjxsaT48c3Ryb25nPndvb192aWRlb19jYXRlZ29yeTwvc3Ryb25nPiAtIFNlbGVjdCBhIGNhdGVnb3J5OjwvbGk+PC91bD4=