If you have a website, blog or social networking profile and you haven’t checked out the Google Font API, you are missing out on a great new technology. Previously, visitors to your site had to already have a font installed on their computer or device in order to see that font if it was used on your site. With Google Font API, you only need to add a couple of lines of text to your page and you’re all set!
Google Font Preview
To get an idea of what you can expect from the Google Font API, check out the Google Font Preview. It lets you use some sample text that is already defined for you, or you can change it to suit your needs. Once you have done that, you select from the font you want via a dropdown list. You can also set the decoration for the font, along with size, shadow, and spacing for the letters, words and lines. Once you are done, the demo automatically provides you with the code to use that font and styling for your own page.
A number of sliders enable you to play with the spacing, and you are also able to transform the text from uppercase, to lowercase, and you can capitalize it as well. The code it creates calls the font from the Google Font API, and the writes the CSS the page will need in order to utilize the font.
Using the Google Font API
The Google Font API enables developers to use the fonts that are in its Google Font Directory. The Google Font Directorycurrently features 45 fonts to choose from, including Crimson Text, Droid Serif, IM Fell and Lobster, among others.
To use the Google Font API, you only need to do two simple things:
- Add a link to the Google Font API, like this:
<link href=' http://fonts.googleapis.com/css?family=Nobile' rel='stylesheet' type='text/css'>
- Use the new font within your site’s CSS, like this:
h1 { font-family: 'Nobile', arial, serif; }
It gets even more simple. Google has created the Font Directory so that when you go to an individual font’s display page so you can learn more about the font, it shows you the specific code you will need to add (essentially, you only need to change the “family=Nobile” part from the example above to the font family you will be using). It also provides you with an example of how to use the font within your CSS code.
Also noted by Google is that you can also use the fonts inline, like this:
<div style="font-family: 'Font Name', serif;">Your text</div>
Also emphasized is that you should use a “fallback” font, one that your visitor is likely to have on their machine, just in case, to avoid unexpected behaviors. To do that, add a generic font name such as serif or sans-serif to the end of the font list, like this, and as shown in the above examples:
CSS selector {
font-family: 'Nobile', serif;
}
To use more than one font from the Font Directory at a time in your CSS, just add them to the end of the font list in your API call, with each font separated by a pipe character, like this:
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
As you can see, if there is a space in the name of the font, use a plus sign instead of the space. You will want to spare your site’s visitors from downloading fonts that are not used, and to keep things neat, don’t use too many fonts on a single page. You don’t want your pages to look like ransom notes!
Here is an example of the Google Font API in use:
Using the Google Font API Couldn’t Be Easier!
And here is the code that is used to do it:
<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular"
rel="stylesheet" type="text/css" > <style> P.testfont { font-family:
'Reenie Beanie', serif; font-size: 47px; font-style: normal; font-weight: 400;
text-shadow: 4px 4px 4px #bbb; text-decoration: none; text-transform: none;
letter-spacing: 0.073em; word-spacing: 0.034em; line-height: 1em; } </style>
