As far as fonts go, the web is a pretty boring place. Choices are limited by many factors and most web designers rely on a few standard rules when picking typefaces. Google aims to change all that with it’s Fonts API and Font Directory. The Google Font Directory allows you to browse a directory of attractive fonts for use on your site and the Google Fonts API makes it simple to include those fonts on your page.
One of the primary problems with using nice fonts on a web page is that those fonts are probably not free for your use. A font is just like a photo or piece of music in that you need permission to use and/or distribute it. With the Google Fonts directory, you now have access to fonts which are free to use and also pleasing to the eye.
The other side of this is that designers often have to guess at what fonts a specific visitor has available. Unlike photos and other embedded media, fonts are usually stored locally on a visitor’s computer. Rather than making assumptions about what a visitor has available, the Google Fonts API makes the fonts from the Fonts directory available to your page with a few simple lines of code. This means that you can reliably predict what your site will look like for most users.
If you are interested in seeing these fancy new fonts, you don’t actually have to do anything. If you’re a web designer looking to implement these fonts in your projects, the process is quite simple.
- Request the relevant stylesheet from Google for the font you would like to include:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
- Reference the included font as you would any other with in your CSS like this:
CSS selector { font-family: 'Font Name', serif; }or like this:
<div style="font-family: 'Font Name', serif;">Your text</div>
Font Name is the name of the font you’ve chosen from the Google Font Directory. CSS Selector would be the name of a particular HTML element, a class, or unique id you’re trying to style. The Google Font API will have a downside as some “web designers” get carried away and use as many fonts as possible on the same page. On the bright side, this should make the web a slightly better place by making it easier to include clean and professional fonts on any site. This is only a basic example. For full details and other options available in including fonts, check the quick start guide.