How to Use Free Google Web Fonts

Google Web Fonts is the best way to add amazing new free fonts to your site. Google web fonts are similar to web safe fonts, which can be added to any site by adding a few simple lines of code to your html.

Enthused by the new font technology and with the intention to improve our web design fonts,  we tested out the Google web fonts. And it was much easier than I thought and was compatible with most web browsers.

Free Google Web Fonts

I decided to change the fonts of post titles on our front page and single pages. So we browsed across Google Web Fonts gallery and decided to chose Droid Serif, which incidently was the most popular serif font in the font directory (You can sort fonts by various filters).

google fonts

So I clicked on the Droid Serif font and decided to “Use the Font” and they gave me the code to use. This is the code to add to the head tags.
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>

And this is how to modify the font family tag in CSS stylesheet. (Note the fall back font is Arial or any other serif font just in case the browser is unable to render the new Google web font.)
h1 { font-family: 'Droid Serif', arial, serif; }

So I just inserted the code between the <head> tags and modified the CSS and you can see the new font live on the title of this post and all title posts on the main page (as we added it to h2, h3, h4 tags also).

Try Google web fonts, as there are some really amazing web fonts out there and amaze your readers. You can add as many free web fonts as you like. Which is your favorite Google web font?