Adobe TypeKit

HTML & CSS
1

<script src=“http://use.typekit.com/daz7uli.js”></script>
<script>try{Typekit.load();}catch(e){}</script>

I noticed this bit of code on a respectable website but I can’t figure out how or why they are using it?

I have never used Adobe TypeKit for loading websites before. I have only used Font Squirrel to generate fonts like so:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 23, 2013 08:21:00 PM America/New_York */
@font-face {
font-family: ‘ProclamateLight’;
src: url(‘proclamate_light-webfont.eot’);
src: url(‘proclamate_light-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘proclamate_light-webfont.woff’) format(‘woff’),
url(‘proclamate_light-webfont.ttf’) format(‘truetype’),
url(‘proclamate_light-webfont.svg#ProclamateLight’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

However, is Adobe TypeKit a better solution than @font-face? Or is it even intended to replace @font-face CSS declarations?
Just trying to get a feel for what would work best and on all platforms, mobile browsers and outdated desktop browsers too.

Thanks,

2

TypeKit is one of many services for serving up fonts with @font-face. The reason these services exist is to get around the problem of licensing. FontSquirrel can only offer you fonts that have been offered for free use. But there are many, many fonts that are not free to use this way. Font foundries have been very slow to prepare for / allow for @font-face, for the obvious reason that it means you are distributing the font all over the web for anyone to use—a nightmare from a copyright perspective.

So services like TypeKit (I think they were the first, in fact) developed a way to serve fonts on the web without thereby allowing end users to download the font and keep it. This keeps a lot of the font creators happy, and means we can use a lot more fonts on the web with @font-face. The foundries get paid, too, because you pay to use these services.

These services make it really easy to use the fonts, too, by giving a simple string of code that you add to your pages. You then just reference the font in your style sheet like any other font. Cool! That’s much easier than uploading all the fonts and adding in all that FontSquirrel CSS too. (Don’t get me wrong, though: FontSquirrel is my preferred option, but it can’t offer you commercial fonts.)