Google Web Fonts or Typekit?

As a graphic designer, I do website designs, but not the development. Someone asked me today if I know about Typekit, and I hadn’t heard of it so I googled it, and it seemed pretty much like a paid for version of Google Web Fonts; which I occasionally use. I don’t know the technical, developer reasons for using one or the other, but I don’t want my client buying something when he could have just used something else for free, and got the same sort of results. So, my question is, is one better than the other? Or are there good and bad points to both?

Answer

Another option that’s more flexible than either of those is using @font-face.

It’s free, and you can use whatever font you want. Just have to upload the font to wherever the site’s hosted and specify it in the css. Only thing is you have to convert the font format to be compatible with different browsers.

Here’s an example – say you want to use the LeagueGothic font:

1) Use a font convertor to convert it to .ttf, eot, woff etc.
http://www.fontsquirrel.com/fontface/generator

2) Upload all the font files to a fonts folder

3) In your CSS, include (make sure to update the path url accordingly):

      @font-face {
       font-family: 'LeagueGothicRegular';
       src: url('../fonts/League_Gothic-webfont.eot');
       src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/League_Gothic-webfont.woff') format('woff'),
       url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
       url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
       font-weight: normal;
       font-style: normal;
     }

4) And when you want to use it, just call it:

    h3{ 
      font-family: 'LeagueGothicRegular', 'Gill Sans', 'Lucida Grande', Trebuchet, sans-  serif; 
    }

Haven’t tried Typekit, but I think it essentially does the same thing – just takes out the conversion step and hosting for you, and also provides lots of fonts to choose from. @font-face is really not that much more work though, so I personally prefer it.

Check out this post for more info: http://sixrevisions.com/css/font-face-guide

Attribution
Source : Link , Question Author : Willow , Answer Author : an yu

Leave a Comment