Experience Design

Insights from a Developer: Use Google Web Fonts

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'>

Customer Experience and Design - Build a Better Customer Experience with AEM on Microsoft Azure
Build a Better Customer Experience with AEM on Microsoft Azure

Businesses leveraging the two technologies together would now be able to harness their data for critical insights and predictions, connect customer touchpoints across their business, and drive brand loyalty and growth.

Get the Guide

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.

About the Author

I'm a front-end developer working at Perficient Digital, and I'm passionate about HTML, CSS, and grilling chicken.

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories