Google Web Fonts or Typekit?


Question

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?

1
8
3/22/2012 4:31:00 PM

Accepted 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

6
3/23/2012 2:21:00 AM

First, are you happy with the type selections and the character spacing of fonts on Google Web Fonts? I haven't used them yet, although I have seen at least one or two sites with excellent results using them. At the same time, some of the displays of their fonts show poor letterfit (mostly too much space between letters).

If you need to match to Adobe Fonts used in print, sounds like Typekit might fit the bill. They don't currently show too many Adobe fonts at their basic account level, although there's plenty of choice. The basic account is pretty inexpensive, so a client should be able to afford it. I'm using it on a blog on DrupalGardens at the moment, and enjoy being able to use Myriad Pro.

Probably comes down to choosing the fonts you want to use, seeing which site has what you want or close to it, and going with the flow. You might check out Typecast, a new website currently in private beta, where you can design in the browswer, choose webfonts from Google, Typekit, Fonts dot com, etc., create your site design with web fonts, see exactly how it will look, then order up the fonts that work for you. I've asked to join the beta, to check it out. Should certainly make the process smoother for designers.


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^