Beautiful Web Fonts Part 2 – TypeKit
Posted Friday, February 19th, 2010 at 1:41 pm by Tim (39 posts)
CSS3, which is not yet an approved standard, allows for the inclusion of OpenType and TrueType fonts via the @font-face rule. This is great because there are no browser plugins or addons making the browser render pretty fonts, as there is with sIFR, which requires Flash. This method also leaves your page code alone and, while it does require JavaScript in some cases (see below), does not re-write your HTML in any way.
Typekit
Typekit offers an easy way to take advantage of the capabilities of @font-face without you needing to code for all browsers, obtain licenses for the fonts that you use, and manage the server-side requirements of uploading fonts and such.
It does still cost money (just as licensing fonts would were you to roll your own @font-face setup) but the cost is not bad and you have access to hundreds of fonts that have been licensed to Typekit.
I’m using the free “Trial” license for this post. I can choose from about 100 different fonts but am allowed to use only two fonts on a single website. The trial license also requires me to have the badge you see in the lower right corner of the site present on all pages on which the Typekit JavaScript is present. Most non-personal sites will get what they need with the “Portfolio” plan for about $50/yr. If you want to use Typekit on “https”, or secure, pages or accomodate more than 20GB monthly traffic, you’ll have to pay $249.99/year. A big difference to be sure.
Regular old font replaced by a neat one called “John Doe.”
This is great, but the first person I see using “Coquette” in the content of their site gets the silent treatment from me for a good long time.
The way it works is that you create an account at Typekit.com and put together what they call a “kit” by browsing the fonts online and clicking the “add” button. Then, in your “kit editor” you tell it what CSS selectors (CSS classes, IDs or HTML tags) you want the font to be applied to; the weights and styles (bold, italic, etc.) you will want to use, and what plain fonts you would like to deliver to browsers that do not support @fontface (yup, browser support rears its ugly head again!). After clicking the “Publish” button, you grab a small snippet of JavaScript, add it to the pages on which you would like to apply this new font, and you’re good to go. Just add the class name you defined when you built your kit to the elements you want styled and it just works.
From creating my account to styling the text you see above was less than five minutes. I added the JavaScript snippet to the template for this entire blog and I don’t have to think about it again.
As mentioned, Typekit does require JavaScript which is used to generate the link to your “kit” that you created at Typekit.com. The script does not in any way alter the HTML your page originally contained as sIFR does to replace text with a Flash version of the same text.
Also, though you may see a flash of un-styled text as your page begins to load, this method is much quicker to load than sIFR. sIFR fonts will generally look smoother because of the way that they are drawn by the Flash, but are also not re-sizable on older browsers that do not increase the size of everything on the page as the latest versions of Firefox and IE do (and as Opera has for some time).
So, while I have yet to use TypeKit on a client Web site, I’ve not seen anything so far that would stop me from doing so.
