Working with Google Fonts

Learning Goals

At the end of this Tutorial you will be able to:

Select font families, weights and styles from Google Fonts.
Add a Google Fonts stylesheet to the <head> of a HTML file.
Add a Google Fonts value to the font-family property of a CSS file.

You can view a finished version of this project by clicking the image below.

About Google Fonts

Google Fonts offers the Internet’s largest collection of open-source, royalty-free fonts. All 900-plus fonts can be used without restriction for personal, not-for-profit or commercial web projects.

At the Google Fonts website you can search for fonts by name, category (such as Sans Serif or Handwriting), font style (such as Thickness or Slant), popularity (Trending now) and more. There is also a ‘Featured‘ page that showcases new additions to the Google Fonts library.

To see how a headline or a few words text will look when styled in a particular font, hover over the font, click the red SEE SPECIMEN button, and, on the next screen displayed, type your chosen text on the preview line.

Google Fonts: Step-by-step

Here are the basic steps to using Google Fonts in a web project.

On the Google Fonts home page, select your chosen font by clicking the plus (+) icon at its top-right corner. This adds the font family to the ‘font drawer’, a black bar near the bottom-right of the screen. You can select multiple fonts, if required. All your fonts will be included in the font drawer.
Click the font drawer to open it. You can see it contains two tabs. Use the Customize tab to select the font weight(s) and style(s) you require for your chosen font(s). Only add those weights and styles you absolutely need. The more versions of a font family you add, the slower your web page will load.
Use the Embed tab to copy the code for pasting into your web project. You will copy one part of the Google Fonts code to the <head> of your web page, and the other to the style rule(s) of your CSS file.
The syntax within a CSS block that uses a Google Font will look as shown below. Always enclose the name of a Google Font within single quotes.
```
h1 {
   font-family: 'Roboto', sans-serif;
   ...
}
```
In this example, Roboto is a Google Font, while sans-serif is known as a fallback font that is displayed when you view your web page without any Internet connection.
```
h1 {
   font-family: 'Libre Baskerville', serif;
   ...
}
```

Your two work files: base-5.html and base-5.css

In this Tutorial you will work with these two files:

The web page named base-5.html. This is a copy of the base-4.html file from the previous Tutorial.
The stylesheet named base-5.css. This is a copy of the base-4.css file, also from the previous Tutorial.

First, let’s edit the HTML file from your previous Tutorial:

In your text editor, open the file named base-4.html.
In the <head> of the base-4.html file, change the title as follows:
```
<title>Responsive web page with Google Fonts</title>
```

Also in the <head>, change the description as follows:


<meta name="description" content="A sample responsive web page with examples of Google Fonts.">

And finally in <head>, change the stylesheet link as follows:
```
	
  <link rel="stylesheet" href="base-5.css">
```
Use the File | Save As command to save your HTML file with the following new name: base-5.html
Switch to the base-4.css file, and use the File | Save As command to save the file with this new name: base-5.css

You are now ready to work with your new web page (base-5.html) and stylesheet (base-5.css).

Styling headings with a Google Font

We will begin by selecting the Google Font named Playfair Display, and then applying it to headings in your web page and stylesheet. Follow these steps.

Use your web browser to go to this web address: https://fonts.google.com
In the Search Box near the top-left corner, type font name of Playfair Display.
Playfair Display appears as the first font listed. Click the red plus (+) icon at the right of its name to select this font.
At the bottom-right of the Google Fonts screen you can see a black bar. This is called the ‘font drawer.’ After selecting the Playfair Display font, the font drawer should look as shown below.
Click anywhere on the font drawer to open it. The font drawer should now look as follows.
Next, click the Customize tab.
For your selected Playfair Display font, click to select the four combinations of style (regular and italic) and weight (400 and 700) as shown below. Note that, in CSS, font-weight: 400 is the same as font-weight: normal, and font-weight: 700 is the same as font-weight: bold. You have now selected the four versions of the Playfair Display font you want for your web page. Your next steps will be to:
- Copy-and-paste the Google Fonts stylesheet into the <head> of your HTML file.
- Update the relevant font-family styles for the headings in your CSS file.
On the Google Fonts screen, click the Embed tab at the top of the font drawer window. It should look as follows.
Copy the top section from Google Fonts, and switch to your text editor. In your base-5.html file, just after the link to the base-5.css stylesheet, paste this line from Google Fonts.
```
	
  <link href="base-5.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i&display=swap" rel="stylesheet">
```
As you can see, this is a link to a stylesheet on Google’s web servers.

In your text editor, switch to the base-5.css stylesheet. And for all three headings, change the value of the font-family property as follows.


h1 {
   font-family: 'Playfair Display', serif;
   ...
}

h2 {
   font-family: 'Playfair Display', serif;
   ...
}

h3 {
   font-family: 'Playfair Display', serif;
   ...
}

Save your HTML and CSS files, and view the web page in your browser.

Styling paragraphs and lists with a Google Font

In this next step, you will add a second Google Font for the text (paragraphs and lists) in your web page and stylesheet. Rather than revisiting the Google Fonts website and following the font-selection steps, you will do this the quick and simple way – by copying and pasting.

In your text editor, go to the <head> of your base-5.html file, and select the link to the Google Fonts stylesheet by dragging across it.
Press Enter to create a new blank line, and then copy-and-paste the selected line directly under the Google Fonts link as shown below.
Edit the pasted line to replace ‘Playfair+Display’ with ‘Lato’ (without the quotes). Lato is the name of the new font that you will use to style paragraphs and lists in your web page.
In your text editor, switch to the base-5.css stylesheet. And for paragraph and bullet styles, change the value of the font-family property as follows.
```
p {
   font-family: 'Lato', serif;
   ...
}

ul li, ol li {
   font-family: 'Lato', serif;
   ...
}
```
Save your HTML and CSS files, and view the web page in your browser. It should now look as shown below.

Font weights and styles

In typography, font style refers to the shape of the font. Font weight refers to the heaviness of the font.

Most Google Fonts are available in at least two styles (normal style and italic style), and two weights (400 and 700, corresponding to normal weight and bold weight).

Some Google Font families, however, have a wide range of weights. These vary from very thin at end extreme to very heavy at the other. Note that, except for at large sizes, thin font weights can be difficult to read on-screen. You can see some examples of Google Fonts with lots of weight options below.

In contrast, other Google Fonts are very limited in both their styles and weights. This is particularly true of display and hand-writing fonts, and also slab fonts (serifs characterized by thick, block-like serifs). Some such examples are shown below.

Adding multiple Google Fonts to the <head> of a web page

When you select two or more fonts on the Google Fonts website, they are added to the 'font drawer' at the bottom-right of the screen. Project Animation Google Fonts

On using the Customize tab within the font drawer to select your required weights and styles, and then viewing the Embed tab, you will see that the various fonts are joined together on a single line.

This reduces the time it takes for the two fonts to load from the Google web server because your web page needs to make just one request rather than two.

However, when you check your web page on the official HTML Validator, you will see an error message similar to the following.

As with any error message, an obvious first step to finding a solution is to enter a query on Google or other search engines.

The first search results you should see will be from a website named Stack Overflow. This is a free question-and-answer service for all types of software issues, including problems related to HTML and CSS.

When you read through the answers on Stack Overflow, you will see that you need to replace the invalid | character with %7C. An example is shown below.

	
  <link href="https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i%7CRoboto:400,400i,700,700i&display=swap" rel="stylesheet">

Google Font combinations

As a web designer, you will often want to pair two Google Fonts – one for headings and the other for paragraph text – in a harmonious and visually pleasing combination. Here are a few websites that offer some inspiration for pairing Google Fonts:

The Ultimate Collection of Google Font Pairings by Lou Levit
10 Useful Google Font Combinations for Your Next Site by Caleb McGuire
15 Great Google Font Combinations For Your Next Design Project by Digital Synopsis

Updating the <head> of your web page

Before you validate your web page and upload it to GitHub, ensure the following details are correct within the <head> of your base-5.html file.

You have replaced the name ‘Mary Smith’ with your own name.
You have replaced the sample Google Tracking ID with your own Google Tracking ID. The instructions for viewing your website’s unique Google Tracking ID are here.

Validating your web page

To check the HTML in your web page is correct or valid, use the official W3C Markup Validation Service as follows.

Go to this web page: https://validator.w3.org.
Click the Validate by Direct Input tab.
Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate.
Click the Check button.
If you see any errors, return to your base-5.html file in your text editor, fix the errors, save the file, and copy-and-paste the entire file again. In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validating your stylesheet

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

Go to this web page: https://jigsaw.w3.org/css-validator.
Click the By direct input tab.
Copy and paste your CSS file into the box named Enter the CSS you would like validated.
Click the Check button.
If you see any errors (other than those related to the fluid typographic equation, as shown below), return to your base-5.css file in your text editor, fix the errors, save the file, and copy the entire file again.
In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Uploading your two files to GitHub

After validating your web page and stylesheet, you are now ready to upload them to your account on GitHub.

Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories.
On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub. username.github.io
On the next screen displayed, near the centre of the screen, click the Upload files button.
Select or drag-and-drop the two files base-4.html and base-4.css to upload them to your GitHub account.
After uploading your files, scroll down to the bottom of the screen, enter a short message in the Commit changes box and click the Commit changes button.

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/base-5.html

It may take a few minutes for your uploaded files to appear on GitHub.