Let’s discuss typefaces. As the designer, you have the distinct privilege of selecting the fonts that will be used on the website, and barring client restrictions, you have free reign to use whichever fonts you desire. You should keep in mind when choosing a font, though, that this typeface needs to be present not only in your designs, but also on the user’s computer when they are viewing the site. Luckily there are plenty of ways we can do this now, from being boring and choosing a font that’s included on every computer (Arial, Times New Roman, etc.), to embedding custom fonts on the site. However, by far the easiest of these solutions is to simply use Google Web Fonts.
Google Web Fonts is a service provided and run by Google to make using custom fonts on the web fast and easy. Ready for the best part? It’s completely free and open source. To use a font in your design, you simply browse their list of fonts, find one (or two, or ten) you like and download it. No paying $20 for a license, no browsing shady websites trying to find a working download link, just simple plug and play. All that’s left for you to do is install the font and create your beautiful design.
Of course, Google Web Fonts is not without its disadvantages. The font selection catalog is limited, and there are not going to be any big name typefaces hidden in there. While there are several hundred different fonts to choose from, keep in mind you won’t be getting your fifteen weights of Helvetica or that sleek and sexy DIN. That doesn’t mean, however, that there aren’t any good, usable fonts to choose from. You can find dozens of resources online that quote their favorite Google Web Font combinations, and of course there is nothing wrong with rolling up your sleeves and digging in to find a treasure for yourself.
Now I know what you are thinking. How does this splendid tool help my friendly neighborhood developer? I am so very glad you asked! I did not think there would ever be a simpler way to embed fonts than using @font-face, but I do love being proved wrong. With Google Web Fonts, there is no extra CSS to write, no Javascript to include; all that is needed is a link to the Google hosted font-specific CSS file. That is it. That is literally all there is to it. To use, for example, Droid Sans in a website, you would add the following line of code in the <head> of the HTML file, preceding your other CSS links:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
Then in your CSS files, you can access the font by using the font-family attribute like usual:
font-family: 'Droid Sans', sans-serif;
And there you have it!. Your website is now enjoying its brilliant new typeface.
