Gone are the days when you had to use "web safe" fonts in your HTML documents. In the past, web designers were limited in their font choices because the font had to be on the visitors computer or they would not see it. If you wanted a fancier font, you had to rely on font embedding or just make an image. It wasn't very efficient. Now the game has changed. Don't like a font we chose for our template? Just change it!
1Link to CSS files: You link directly to the font CSS files on Google.com. Through their URL parameters, you specify the fonts you want, and any variations of those fonts. Don't worry, Goggle Fonts gives you all of the directions you need and it is very easy. The hardest part of deciding on which font(s) because their selection is so large. It's hard to choose only one or two (or three, or four).
In the example above, I want to use Muli for the content, and Federo and Oswald for my heading tags. Because the Oswald font comes in more than one font "weight", I chose the lighter weight rather than the default weight of 400. If you choose a multiple-word font like Open Sans or Open Sans Condensed, you need to add a plus sign rather than leave a blank space -- Open+Sans -- Open+Sans+Condensed.
2Add the fonts to the CSS file: Next I will want to add the Google font names to the appropriate font-family properties in the css file. The Google font names must be surrounded by single quotes. [If you are not sure how font-family properties work, click to read the article under Learn CSS.]
Important: Google fonts will not show when you are working on your web on your computer. You must preview it in your browser for the fonts to appear. So don't panic when you don't see them while editing your web pages.
3How Do I Choose: Over the past year or so, the Google Fonts directory has grown to hundreds of fonts. It can be difficult to choose the perfect font. If you need some inspiration, many have lists of their favorite Google Font stacks (font families) that you will probably enjoy. It may take some trial and error to choose that special look for your site.
