With the availability of Google Web Fonts, many web designers are taking advantage of the improved and controlled typography they allow. I did some type redesign over at Bob Rockefeller Photography using the sans-serif face Arimo for titles and headers, and the serif face Lora for body text.
Making a simple font available on a website is a simple matter of adding a line like this at the head or your CSS file (using Arimo as an example):
@import url(http://fonts.googleapis.com/css?family=Arimo);
Google’s website makes it easy to generate the needed code for any number of fonts and styles. And that’s where a little more knowledge is required.
To use the normal style of the font, your CSS just has to assign it to a rule, like this:
font-family: 20px Arimo, sans-serif;
Notice that I’ve included the browser’s default san-serif face as a backup, in case there is something wrong with Google’s servers. At least the user will see a readable version of your site.
And getting to the italic version of the font is straight forward, too, just use:
font-style: italic;
Now you need to be a little more careful for any of the “fancier” available faces, such as the different weights that Exo comes in (100, 200, 300, 400, 500, 600, 700, 800, 900). Obviously simply using:
font-style: bold;
won’t do it alone. The “trick” is to use the font-weight property, like this:
font-weight: 400;
or:
font-weight: 700;
to get at the various font weights any font face may have available (assuming you’ve loaded them all back in the @import step). For font faces with different weights of italics, just combine the two.
To be sure you’re getting the font face you want in the situation you want it, your CSS file will have to be sure to define all the situations in your design:
strong,
b {
font-family: “Lora”, serif;
font-weight: 700;
}
p em {
font-family: “Lora”, serif;
font-style: italic;
}
That’s pretty much it. If you have any techniques to add, please add them in the comments.
