Saturday, April 21, 2012

Fonts for the Web: Typekit by Adobe

Typekit Adobe provides online fonts for websites.  You can sign up for different plans here.  Here are the steps for using the service:

1. Go to and Sign In (upper right).
2. In the pulldown at the upper right, select the site to work with.
3. Click "Launch Kit Editor"
4. Find a font and click "Add to Kit"
5. Now in the typekitEditor, add a selector for the new font and click Add.
6. There may be multiple weights and styles available, if so choose the ones you want. Note that the more you add, the more your kit download will grow in size.
7. In your markup, use the selectors that you added for the font.

Also: If you haven't already embedded the kit code in the section of your page that will be using the fonts, then in the typekitEditor, click "Embed Code" (at upper right). Cut and paste the two script sections into your document head.

To delete a project that you no longer need, go to "Launch Kit Editor". "Kit Settings" link in the upper right corner of the Kit Editor takes you to a page where you are given the option to delete the entire project.

I am using a Typekit font for my blog post headings. Adobe added a grey colored, fixed positioned Typekit colophon badge in the bottom right corner of my blog when I initially set it up. Since I pay for their services, I don't feel the obligation to advertise for them in the blog. To remove their logo, go to "Launch Kit Editor">"Kit Settings">"Colophon Settings" and uncheck "Enable Colophon Badge".

Post a Comment