Posted on June 14, 2011 - by CDS, 9 Comments
How to get those awesome fonts on your website
Tired of Arial and Times New Roman? Yeah, we were too. There are a couple super simple solutions that we use on our projects that allow the use of a wider range of fonts, without the viewer having to install the font itself. Although there are several solutions, we prefer Google Webfonts and TypeKit. Both solutions are standards compliant, and work about the same way: a script call is added to the header of the site, and the font formatted in CSS.
Google Webfonts are free, which is really nice. They only encourage donations to the font designers. We are using Google Webfonts on this site (Old Standard, Quattrocentro, and Rock Salt). Google Webfonts library is growing, and they’ve got a nice selection of serifs, sans-serifs, handwriting, etc. A little of everything. So far the I haven’t experienced a browser the fonts won’t display the fonts. I’ve tested Firefox 3.0+, IE 7.0+, and Safari.
Typekit is generally a paid service. They do offer a limited usage free option, but with the requirement that a “Typekit Badge” be displayed on the website. It’s a small, innocuous badge that won’t deter from any website. But the free service does not allow access to all of their fonts. Since their prices are very reasonable, from $24.99 to $99.00 per year, you wouldn’t be out much to jump in and try out their more expanded packages. Typekit’s greatest asset is its large font library and language options. It’s well worth the small amount of dough.
They also limit the number of page views, font access, and number of fonts you can use at one time. To clarify about the page views; they are guidelines and the company won’t shut off the fonts if you go over, they’ll just ask you to upgrade to the appropriate page view bracket. Seems fair to me. You’re using their bandwidth when you use the service, and as everyone knows, bandwidth isn’t free. All restrictions aside, Typekit blows the competition away with their large font library, and notably comprehensive language selections.
Both options are a great tool for any web designer. For years, we’ve had to use boring fonts to conform to all the browsers out there. Now there’s a really simple solution to maintain maximum SEO and still have a lovely typeset.
9 Comments
We'd love to hear yours!
Leave a Reply
Here's your chance to speak.
Visit My Website
June 15, 2011
Permalink
HenTheBull said:
Cool, thanks for the tip!
Visit My Website
June 30, 2011
Permalink
audopilit said:
I’ve had a good experience with TypeKit… Highly recommend it.
Visit My Website
June 30, 2011
Permalink
Benares said:
Never used google but type kit is really cool. They have a huge library and the free badge is small.
Visit My Website
July 12, 2011
Permalink
Venben said:
Thanks for this. I never knew about type kit. I will have to try these next time.
Visit My Website
July 12, 2011
Permalink
Venben said:
Posted at 1:08am!? Working late?
Visit My Website
September 1, 2011
Permalink
helldeathtorchcow said:
google webfonts have come a long way. they keep adding new fonts and have improved their interface recently. can’t really beat free webfonts.
Visit My Website
September 2, 2011
Permalink
San Diego Design said:
I’ve used typekit and google fonts and google is way better. Typekit has more fonts but google is always increasing their collection and google is free.
Visit My Website
October 4, 2011
Permalink
Kristina said:
You should also check out Cufón for font replacement: http://cufon.shoqolate.com/generate. I originally disliked the fact that Cufón text was not selectable, but I found out recently that you CAN select the text: it just isn’t easily apparent in all browsers.
Visit My Website
October 4, 2011
Permalink
CDS said:
@ Kristina
Thank you for that. I have limited experience with cufon, but it is definitely another commonly used service. I see it used a lot with Wordpress in particular.