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.
<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.
I’m a front-end developer working at Perficient Digital, and I’m passionate about HTML, CSS, and grilling chicken.