Aren’t you tired of designing site with the same old font stacks? Tahoma, Arial, Helvetic, sans-serif… yawn… I’m going to show you how you can add an extra touch to your site by using the Google Font Directory.
Although the choice is fairly limited (28 fonts a the time of writing 34 fonts*) it’s still far more choice the just sticking to ‘web safe fonts’ — here’s how it’s done…
1 Choose the font you would like to use. Let’s pretend you’re looking for a nice strong heading and you decide to use Avro bold. (pic) Click on the font in the list and then click on the ‘Get the code’ tab.
2 Use the checkboxes to select which variations of the font you require (in this case just ‘bold’), and then copy the code below
<link href='http://fonts.googleapis.com/css?family=Arvo:bold&subset=latin' rel='stylesheet' type='text/css'>
and paste it into the <head> section of your page. Note: instead of adding a <link> in the <head> section of your page you could include it directly in your CSS by adding the following code to the top of your stylesheet
@import url(http://fonts.googleapis.com/css?family=Arvo:bold&subset=latin);
3 From here on it’s just a simple matter of applying the font in your CSS like any other font:
h1 {
font-family: 'Arvo', arial, serif;
}
Don’t forget to add a fallback to the stack for any non compatible browsers — At the time of writing, the following browsers are supported:
- Google Chrome: version 4.249.4+
- Mozilla Firefox: version: 3.5+
- Apple Safari: version 3.1+
- Opera: version 10.5+
- Microsoft Internet Explorer: version 6+
However the API doesn’t support iPhone, iPad, iPod or Android, and so anyone accessing your site on these platforms will see the fallback fonts in your stack.
You may also like to check out TypeKit – it does pretty much the same thing, and although it’s not free like the Google API, it has far more choice – This site is currently using TypeKit for its fonts Main heading: Bello Pro, Blog titles: Atrament Web, Body text: FF Netto Web).
A demo of the Google font API can be seen here
* this post was edited 4/12/2010