Site icon Treehouse Blog

Getting Started with Typekit

The easiest way to use real fonts on the web

[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.”

Introducing Typekit

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.

View the demo page

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.

View the demo page

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:

[Editor’s note: Dan Cederholm will be teaching Progressive Enrichment with CSS3 at FOWD NYC.]

Exit mobile version