How to use Google Font Directory for webfonts
I have previously written about using custom fonts through @font-face, and the difference it makes for the visual appearance of a website. Today I want to recommend a large directory of hosted fonts that you can include in your designs easily, without having to deal with the actual font files. Google has launched a site called Google Font Directory where the fonts are hosted, and possible to use by embedding a few lines of code in your sites. To get started, all you need to do is to follow a few simple steps.
Step 1: Selecting a font to use
The first thing to do is to go to the font directory and find a font that you would want to use. Keep readability in mind, not all fonts are suitable for all situations. For example, I would want to use the Swanky and Moo Moo font for a specific h2 header, so I go to the font directory and click the font. That takes me to this page:
Step 2: Inserting the font code
When I click the “Use this font” tab I am taken to a page describing how to include the font on my website. The instructions are simple and easy to follow. First of all, I need to place a line of code in the <head> section of the HTML of my site. It is a link to a stylesheet that defines the location of the font, as hosted on the Google servers:
<link href='https://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo' rel='stylesheet' type='text/css'>
Step 3: Use the font in the CSS
Once the CSS is loaded, the selected font can be used just like any common websafe font, in the stylesheet. To use it with my <h2> tags, I define it using a standard CSS declaration:
h2 {font-family: 'Swanky and Moo Moo', serif;}
This will result in all h2 headers being rendered with the pretty Swanky and Moo Moo font. There are of course more options, possibilities to load multiple fonts and an API that allows more advanced operations. But in order to break free from the classic websafe fonts and start exploring the concept of @font-face, this is actually a simple first step. Want to learn more? Read the official documentation.
Have you used Google Font Directory on your site? Post your story in a comment and show off your work, it would be interesting to see more examples of how this excellent tool is used out there.
This article was written by Andreas Viklund
Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.