Congrats TypeKit!!!

I have been following Typekit for quite sometime for their unique product with customized fonts. Recently they are acquired by Adobe. So, first of all congrats to the Typekit Team!!!

And Today, I have tried out their free trial version. The product is so intuitive and I was able to setup a custom font in no time. Also, I have taken a look at how it works. Basically, they ask you to include the JavaScript snippet as shown below in your web page where you require the custom font.

<script type="text/javascript" src="http://use.typekit.com/qip6nwu.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

This takes care of fetching the customized font that you have selected on Typekit website through a CSS file request. This CSS file makes use of the CSS @font-face feature(Read more about font-face here). The CSS response looks something like as shown below. They load the font through data URI instead of making another http request.

@font-face {
font-family:"league-script-no-1";
src:url(data:font/opentype;base64,d09GRk9......);
font-style:normal;
font-weight:400;
}
.tk-league-script-no-1{
font-family:league-script-no-1,sans-serif;
}

Now, use this CSS selector class(.tk-league-script-no-1) in your web page for the elements for which you need the customized font to be applied.