Exercise : Google Fonts Bibliography (Add a Web Font)

Web fonts are fonts that have been saved in a format that works on the web. They are accessed from a server via the @font-face declaration. They are accessed two ways: self serve or using a provider.

Web Font Providers

If you don’t want to deal with the @font-face declaration, you can work with web font providers. They host the web fonts on their servers, and take care of the @font-face declaration behind the scenes.

In this lesson, you will choose and apply a google web font (text font) to the final bibliography from the last exercise.

Overview of the Assignment

1. Make a copy of your bibliography_display folder. Rename it bibliography_google. Rename your CSS file bibliography_google.css, and link to it.
2. Go to Google Fonts and choose a text font of your choice. Many kinds of fonts are available; choose one that has an italic style (for the titles in your bibliography) a bold weight (if you need it for your headings or strong text, and works with your display face. (Note: you can also choose to change your display face.)
3. Follow the instructions for using the web fonts (outlined below).
4. Adjust the size, weight, and case of <h1>, <h2>, and <p> as needed, so the headings and text work together in a system.

Getting Started

Make a Copy of the Last Lesson Folder

In this exercise, you modify the final bibliography from the last lesson, so make a copy of that lesson’s folder (bibiography_display), and name the new folder bibliography_google. Keep the new folder inside the web_typography folder.

Set Up Your Files

Rename the CSS file bibliography_google.css. Link it to the index.html file by going into the HTML file and changing the syntax in the head element to the following:

<link href="bibliography_google.css" rel="stylesheet" type="text/css">

Change the title to

<title>Bibliography with a Google Font</title>

About Google Fonts

Google Fonts is a web font provider. They take care of the @font-face syntax, and provide you with simple cut and paste code to get the fonts working immediately. There are many web font providers. They don’t all work exactly the same way. But if you know how to use @font-face, and you know how to use Google Fonts, you’ll find it easier to learn how to use other services.

Pick a Font

Go to Google Fonts to look for a font for your text. They have over 700 options to choose from. Use the filter on the left side to narrow down the options. For example, if you know you want a Serif font, turn off all categories except Serif!

Get a sense of whether certain fonts might work with your text type. Choose the “paragraph” tab to see how the fonts look in a paragraph. Keep an eye on how many styles the font family has. You’ll need at least an italic for the titles in your bibliography text.

You’re picking a font to use with the display font you chose in the last lesson. It’s easier to do if you can see both the display font and the text font options at the same time. One method is to open the current index.html file in your browser (since you haven’t made any changes, it should look exactly like it did when you finished the last lesson), and compare it to available font options.

When comparing the display and text fonts, look at the usual elements: x-height, bowl, weights and/or contrast in weights of the strokes, and shape of serif (if any). You want a text font that contrasts the display font, but with some similarities so they don’t feel too different.

Quick Use the Font

Once you’ve picked a font, click on the “Quick Use” button (it’s a square with a right arrow inside) for that font.

Choose the Style, Weight, and Character Set

On the quick use page, choose the style and weight you want to use. Don’t select more than you need (it will only slow your page down). The font I’m using, PT Serif, has four styles. But I only need to use two of them.

Select the Latin character set. Some fonts offer a Latin Extended character set, which includes more characters and allows your text to translate into additional languages that use an extended Latin alphabet (Czech, Polish, Turkish, and so on). Beware! The Latin Extended doesn’t work correctly in all Google Fonts. Always test a new font. Latin Extended is not necessary for this lesson.

Copy and Paste Syntax

• Scroll down to step 3 in Google Fonts. Making sure you have the standard tab selected, select and copy the code in the box provided.
• In your HTML file, paste the code as the first item in the <head> of the file, and save.
• Back at the quick use page, scroll down to step 4. Copy the name of the font you’ve chosen to use (including the quotation marks).
• In your CSS file, paste the name of the font into the h2 and p styles, and save. Make sure you make a font stack. (I used Georgia as my fallback font.)

• Make sure you make a font stack. (I used Georgia as my fallback font.)

h2{
     font-family:'PT Serif', georgia;
     }

p{ 
     font-family:'PT Serif', georgia; 
     }

View Your Page

Open the new bibliography page in your browser. The new font should load, and bolds and italics should work as well.

Beware Fake Bold and Italic

Keep an eye out for fake bold or italic. If you use a font that is not a bold weight and use it as a font-weight bold in the CSS, the browser will “fake” the bold — stretching the vertical strokes so they are thicker. If you use a font that is not italic and use it as a font-style italic in the CSS, the browser will “fake” the italic — slanting the letters over to the right. Keep your weights and styles consistent.

Since you are only adding italic (and maybe one other weight or style) of the Google Font for this assignment, everything should work like a dream — as long as you don’t incorrectly add italic or bold. In the future, if you use multiple weights and styles with Google Fonts, you can learn how to do it correctly (so it works cross browser) from this article I wrote about Avoiding Faux Weights and Styles with Google Web Fonts for Smashing Magazine.

Make Changes as Needed

Do your h2 and p work with the new font? Does it need to be bigger or smaller? Do your h2 and p still work with the h1? Does it need to be bigger or smaller? Make changes as needed.

Validate Your Files

Once you have your h1 working with a script font, validate your files. Then you’re ready to move on to the next chapter!