As Google continues to make the web an amazing experience, they’ve now created an easy way for web designers and developers to get many different fonts to display on their websites using Google web fonts. You can browse their catalog of available fonts, learn about the font designers who created them, and copy the code required to use them on your web page. The fonts in the directory are all released under open source licenses so you can use them on any non-commercial or commercial project.

Using Google web fonts is easy. First figure out which fonts you’d like to use by choosing them here.

To embed the fonts into your web page you will need to copy a similar code to the following in your html document.

<link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow' rel='stylesheet' type='text/css'>

The API will generate the necessary CSS specific to the user’s browser so you can use the font on your page. Simply use the font Over the Rainbow in your CSS font stack like any other font, for example:

h1 { font-family: 'Over the Rainbow', arial, serif; }