Google Web Fonts

Cheryl Wise just offered a new template on her site Team Clueless Rally which made use of Google fonts for the fancy type used on the masthead and menu. Cheryl chose the Henny Penny font which you probably do not have available on your computer.

You can see an example of the title and tagline in the screenshot to the left. She achieves the look she wants because she used a Google Web Font that is called using a style sheet link that Google provided and added the font name to the css for the masthead and menu divs.

Quite often on websites I see fancy fonts used BUT unless your viewer has that particular font installed on their machine, the site will not display as intended. In the past, web designers have used graphic images to display fancy fonts they might want to use as part of the page design.

Since I really had not paid too much attention to Google fonts before, I decided to do some research to see how they worked.

Getting Started with Google Web Fonts explains how to use the Google Web Fonts API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special style sheet link to your HTML document, then refer to the font in a CSS style.

There are a huge number of fonts to choose from. Keep in mind that some fonts will be best used as masthead and menu text as Cheryl has done rather than use that font for your entire document.

Using Google Web Fonts

As an example, I decided to use one of the free templates offered on our sister site Default Site Template Project. This default template uses the following font family for the Site Name and Tagline.

font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;

We can spice it up a little by choosing a "fancier font" from the list of Google fonts available.

Step 1: Select the font you are going to use. NOTE: The hardest part may be selecting which of the many fonts to use. For this example, I chose Risque. Click 'Quick Use' on the right hand side of the page.

Step 2: Copy the code Google gives you to the head section of your page or template which is a link to the style sheet.

Example:

<link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css' >

Step 3: Integrate the fonts into your CSS.

#outerWrapper #header .sitename {
font-family: 'Risque', cursive;
font-size: 2em;
color: #FFFFFF;
margin-top: 30px;
margin-left: 25px;
letter-spacing: .25em;
line-height: 1em;
}

#outerWrapper #topNavigation {
background-color: #1C140E;
min-height: 2.3em;
padding: 10px 10px 10px 10px;
border-bottom: solid 1px #1C140E;
font-family: 'Risque', cursive;
letter-spacing: .15em;
}

Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.

There are different font effects you might also like to experiment with.

Example Site