Today I got a chance to check out the Google web fonts and so far I'm quite liking it. Google has built a very nice front end. You can see it in action on http://www.google.com/webfonts.

Here is how it works: You search through the collection of fonts, which is a lot! Currently there are 271 font families available. By adding a font from the selection, you can nicely preview how and looks like. And to top it off, you are given how to implement it, which is super simple.

So here is the rundown on how I did it on this website:

A quick check of the style sheet revealed Arial, Helvetica, sans-serif. Here is the reminder of how this works. The stylesheet specifies the first font option as Arial, in the hopes that the font is present on the viewers computer. If not then the second choice is Helvetica. And if that does not work well, give me sans-serif font, just any one will do at this point! In my stylesheet, there is also a bold specified so I'm hunting for a sans-serif with a bold version.

I went onto the Google Web Fonts and selected Ubuntu for my sans-serif font. And then to get it onto my website, I simply link it:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
And for my serif with an italic variant I picked:
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
So with the choices added to my templates I'm set with the first step. The second step is then updating my stylesheet with the new fonts like the below example.
.slide .entry h1, .slide .entry h3, .slide .entry h4, .slide .entry h5 {font-family: 'Droid Serif', serif;}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {font-family: 'Ubuntu', sans-serif;}
So with this I'm set! It's that easy!

There are a couple of drawbacks to this method by overloading your websites with too many fonts. Luckily, part of selection process of the web fonts, warns you about the load time. There is another trick for that but that will be for another post.

Copyright ¬©  Jasper Kooij
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram