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.

jsFiddle - A cool tool for quick web development...

Today, I have come across this tool called JSfiddle . Found it really cool. It really helps to whip up a web page quickly. It has got great support for JavaScript Frameworks such as jQuery, MooTools, YUI, ExtJS and few more. It is also integrated with JSlint and HTMLTidy. And all of them are available in one single page.

Welcome Comrades!!!

There are so many exciting things happening in the web and I did not have a dedicated blog for it. So here is one to talk about some of those. Hoping to cover the different dimensions of the Frontend Engineering!!!