30 July 2009
Getting Started with Typekit
[Editor’s note: Dan Cederholm will be teaching Progressive Enrichment with CSS3 at FOWD NYC.]
Back in May Jeff Veen (previously of Adaptive Path and Google) announced Typekit, a subscription based service that will allow web designers to use licensed fonts on their own web sites. As Jeff himself explains:
“We’ve built a technology platform that lets us host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM. As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.”
We were lucky enough to have been given a preview invite to Typekit and in this mini tutorial we will be taking a quick look at how to actually implement Typekit in our own demo page.
Step One: Create an HTML Page
To get started I simply created an HTML document with a few simple CSS rules, an H1, an H2 and two paragraphs of text.
Step Two: Creating a Kit
Next it’s time to head over to the Typkeit web site to create our “kit”. This kit will ultimately produce a JavaScript file which will contain the necessary code and fonts to render our chosen typefaces. The two fields are: Name (you are allowed to create a number of kits) and Domains. Each kit is individual and related to a particular domain or domains, e.g. I could use the same kit on both carsonified.com and keirwhitaker.com.
Step Three: Choosing Your Fonts
Once we have created our kit it’s time to select the fonts we want to use on our web site. For this demo I chose Bello Pro and Proxima Nova. Once you have selected your fonts by clicking the “add” button it’s time to launch the “kit editor”.
Step Four: Configure your Kit
The Typekit Editor allows you to apply your chosen fonts to any HTML element, class or id. In the example above I have selected the Bello Pro font (highlighted in green) and specified that I would like it to be applied to the h1 and h2 elements as well as any element with a class of “keir”. You can also target any element by id, for example I could have added #header which would result in the text in my #header element being rendered in Bello Pro.
Unlike Bello Pro the Proxima Nova font has additional weights and styles associated with it. Typekit allows you to choose which ones you would like included in your kit., however adding additional weights and styles will increase the size of your kit considerably. For the demo I have just selected “Regular” and specified that I would like all “p” elements to be transformed into Proxima Nova.
For non @font-face enabled browsers you are able to specify “font fallbacks”. For our demo I chose the default “sans-serif” but you could be more specific. Once you have specified your selectors, weights and styles and CSS stack settings it’s time to “Publish” your kit. Due to the fact that all kits are unique it may take a few minutes before it is ready to be served from the Typekit servers.
Step Five: Adding the Kit to your Web Page
The last thing we need to do is add the JavaScript that references our kit to our web page. To do this we simply click on “Kit Settings” and copy the code from the pop up window. This window will also allow you to edit any of the settings you specified in step one. Finally it’s time to head on over to your HTML file and paste the script references into the <head> section of your HTML page.
Step Six: Preview your Web Site
As you can see from the screen shot the headers and paragraphs are now styled in our chosen fonts.
Summary
Typekit was very easy to use and the interface is very intuitive. My kit was relatively small and as a result the transformation of the fonts was relatively instant, however I imagine as you add fonts to your kit initial loads may take longer. There’s no word yet on the pricing model for Typekit but if they get that right I have no doubt that the service will be extremely popular.
Further Reading
There are a number of great blog posts on Typekit and related @font-face delivery services, here are some must reads:
- Serving and Protecting Fonts on the Web – A technical explanation of how Typekit serves and protects fonts on the web
- First Impressions of Typekit – A detailed first hand account of implementing Typekit on “For a Beautiful Web” by Andy Clarke with comments by Jeff Veen and Jason Santa Maria, both members of the Typekit team
- Web fonts, where are we? – Great round up of the current web fonts situation on “I Love Typography“
- Testing Typotheque @font-face embedding – Andy Clarke road tests Typotheque, an alternative to Typekit
[Editor’s note: Dan Cederholm will be teaching Progressive Enrichment with CSS3 at FOWD NYC.]
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.
Tom
July 30, 2009 - 7:36 am
Nice one for this post. Typekit looks a seriously cool bit of, erm, kit.
Quick question about the rendering – in FF3.5 there is a height issue. Is this down to the javascript, the font, the css, or a little bit of everything?
Jbcarey
July 30, 2009 - 7:38 am
Yes, I’ve noticed this too and as such won’t be using this one my sites…. I wonder when we will finnally be able to use font’s on ALL sites/Browsers!
stk
July 30, 2009 - 6:20 pm
Jbcarey & others – It’s now possible to use the CSS3 @font-face selector for cross-browser font embedding – Here’s how.
No subscription … no 3rd-party server reliance … no JavaScript reliance … easy to use. It’s not (yet) ideal, but possible and IMO way better than TypeKit. ;-)
Cheers,
-stk
Keir Whitaker
July 30, 2009 - 8:39 am
Tom – It’s hard to say. What I hadn’t done in the demo was “reset” the CSS. I have changed the demos to use the Yahoo Reset and the difference between Safari and FF on Mac is very clear on this screenshot.
I suspect it’s a mixture of the javascript, the font and the css although I am not 100% sure.
Tom
July 30, 2009 - 8:57 am
Cheers for that Keir. This will raise the issues of the differences in font heights and such like.
We’ll have to get clever with our fallbacks so if you do have javascript, the height is x, and if you don’t, then you’ll get a ‘normal’ font so the height is y.
All progressive loveliness :)
John Faulds
July 30, 2009 - 9:03 am
It’s even worse in Opera 10b on Windows – only the first letter of some words is styled with the Typekit font. I’ve seen this before on others’ demo pages too.
Hirvesh
July 30, 2009 - 8:03 am
Hey, nice review and tut! I reviewed it too!
http://codefusionlab.blogspot.com/2009/07/typekit-hosted-fonts-for-your-website.html
David Perel
July 30, 2009 - 8:10 am
This is going to change the way we do web design. I cannot wait to start using their kit.
I think web design needs this kind of refreshment, people are going to start getting rather creative with type based sites.
Awesome.
TheFella
July 30, 2009 - 10:16 am
I both like and dislike the idea of Typekit.
I think giving people more font options is fantastic, and as people before me have said, it will change the way a lot of people design (for the better).
The only problem for me is that it uses javascript, and therefore @font-face would be my first and only choice.
The way I might use Typekit would be to use @font-face for modern browsers and then use Typekit to add the exact same fonts in for other browsers. The drawback to this would be reducing Typekit’s vast font library to ones with a @font-face license.
I know I should be more excited about Typekit, but I’m far more interested in font embedding; probably due to the fact that I have js turned off by default, as I assume a lot of web-savvy people might.
Don’t get me wrong, I’m not against Typekit, I’m just don’t think it’s the be all and end all that some people (not implying Keir) think it is. Perhaps in a few months and change.
bogphanny
July 30, 2009 - 12:03 pm
This kit simply uses javascript to add the @font-face rules, using base64 encoded fonts. Clever, but unnecessary.
Nolan
July 30, 2009 - 1:52 pm
I agree. It is adding a lot of extra steps to do something that newer browsers can do natively.
paul
July 30, 2009 - 11:30 am
another option is
http://www.typeselect.org/
Keir Whitaker
July 30, 2009 - 1:45 pm
Typeselect looks interesting. I linked up Andy Clarke’s Typotheque post in the “Further reading” section, it’s also definitely worth a look.
More info here: http://www.typotheque.com/news/typotheque_web_font_service_preview
furiousBlog – in my diatribe » Blog Archive » orange and green
July 30, 2009 - 12:09 pm
[...] Getting Started with Typekit [...]
irf
July 30, 2009 - 1:50 pm
I take it we’re all bored of Sifr now…
Mert TOL
July 30, 2009 - 2:16 pm
Typekit is maybe good idea, but in my opinion, this is really unnecessary. People can simply use @font-face element on their CSS files. Even no using javascript.
For instance, Firefox 3.5 supports Typekit and @font-face too but IE7 supports not Typekit and @font-face too. But!, if you use Typekit in IE7 (you can check the demo on top) you must wait the rendering… And not effects at all.
If you use basically @font-face, you can write the alternative fonts with font-family and like IE7 or using not-supported browser visitors can get the right font instantly. Why am i use extra javascript codes? I can write so many complex usability factors about this topic. I prefer always @font-face with standalone.
Keir Whitaker
July 30, 2009 - 2:28 pm
The JavaScript approach is, I believe, mainly to do with the licensing issues around web fonts. If you reference a font source file using @font-face it’s theoretically possible that anyone could look at the CSS and grab the font for their own use.
From what I have read this is one of the main stumbling blocks with web fonts, Typekit addresses this problem in a number of ways and makes using the fonts “legally” a possibility. More here on how and why they do it this way.
Tom Arnfeld
July 30, 2009 - 3:02 pm
Woah!
This looks really cool… can’t wait for it to come out?
Any idea of a release date :)
John
July 30, 2009 - 3:09 pm
Love the idea of TypeKit, can’t wait to try it out myself… but I’m not a big fan of the font files being hosted remotely.
I’m on a pretty decent connection (DSL, but not the fastest tier) and when loading the demo page there was a noticeable flicker of the unstyled fonts in all browsers. (And a good second or two of waiting for the styling to show up in safari).
This is something that never, ever happens in Safari when the file is located on the same server (and called through CSS only) as Safari waits until the @font-face file is loaded until rendering any type.
I’m not sure if it’s the javascript obfuscation or what, but something is definitely breaking Safari’s usual DOM load and render sequence. Or at least causing it to hiccup.
I also wonder if TypeKit really has the capacity to handle hundreds of thousands (if not millions) of font requests when they come out of private beta. Google seems to handle it alright for their remote analytics .js serves, but I’m sure we’ve all seen imageshack’s bandwidth overload images, and twitter can barely keep up with remote API requests.
I guess only time will tell…
TheFella
July 30, 2009 - 3:27 pm
I know I’m going slightly off track here (it’s still type-related), but if you were to use @font-face, could you embed fonts located above your root directory? If so, how easy would these be to ’steal’?
To be honest, I’m not too sure how the browsers deal with font embedding. Do they cache a local file?
P.S. Glad you fixed Greg’s bad coding… ;)
IONIZED: A Journal of Witty Commentary - Getting Started with Typekit
July 30, 2009 - 3:28 pm
[...] ✖ [...]
Tim Brown
July 30, 2009 - 4:55 pm
Hey nice, Bello and Proxima Nova! I used the same two typefaces in this example:
http://nicewebtype.com/fonts/bello-and-proxima-nova/
This is a wonderful step-by-step, Keir. Thanks for sharing.