“Back in the day” when I used to walk six miles to school, in the snow, uphill both ways… okay, not that long ago, but 10 or 15 years ago anyway, people in the web industry used to speak of “web safe fonts.” Those were fonts that were deemed safe to use on your website on the basis that pretty much everybody (around 99% of users) had them installed on their computer. Since many of us had (and still have) hundreds of fonts, it’s hard to believe the number of web safe fonts was quite small. The number varied, depending on who you asked, but it was usually around a dozen. Enough to have some choice, but not enough to give sites much uniqueness. The list of these fonts included Arial, Verdana, Times New Roman, and everybody’s favourite (ugh), Comic Sans. There’s simply no way you haven’t seen all of these typefaces (basically a fancy alternative name for “fonts”).
Then, in 2010, Google, in its ongoing efforts to make the web a better place, introduced… wait for it… Google Fonts. It’s a collection of hundreds of free, open source fonts, that anyone can use, not just on your website, but on your computer and its programs. You can easily download them to your computer and use them to your heart’s content. And, just because they’re free, that doesn’t mean they’re unprofessional. Quite the contrary, they’re quality typefaces created by real designers.
You’ve most certainly seem more than a few Google fonts in your web surfing expeditions. In fact, this very website uses one of my personal favourites: Lato. Others come and go in popularity. Lobster, for instance is popping up all over the place, not just on the web. (Will it become the new Comic Sans?)
How to Use Google Fonts in Your Website
It’s easy to view the different fonts, in order to decide which one(s) you like best for your project. You can choose from five categories: serif, sans serif, display, handwriting, or monospace. You can filter by thickness, slant, and width. There are several script options (Latin, etc.). And, you can sort the fonts alphabetically, by date added, number of styles, which ones are trending, and popularity.
A very cool feature in this decision process is that you can enter any sample text you want and choose the font size. So, for instance, if you want to see what your name or article heading looks like at 36px, that’s very easily done. Then you can compare a few or several options to decide which you like best.
Once you’ve decided on which font(s) you want to use, Google makes it easy to download them to your computer, if you wish, and gives straightforward instructions on how to use them in your website. Essentially, you just need to add a line of code in the <head> area of your page and then properly reference the typeface when you want to use it (usually in the CSS style sheet). If your eyes just glazed over, don’t worry, your web developer can easily set this up for you.
The bottom line is, there’s nothing for you to install (unless you want a copy of the font for yourself) or upload, other than some basic code. The fonts are just “called” from google.com – easy peasy. Now you have hundreds of fonts that you can use on your website, that everyone will be able to see. Just do me a favour: don’t use all of them on one page. 🙂