Contents  >

Working with Google Fonts

IBAT Next Course

Learning Goals

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

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

GitHub image

Contents

About Google Fonts

Google Fonts: Step-by-step

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

Styling headings with a Google Font

Styling paragraphs and lists with a Google Font

Font weights and styles

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

Google Font combinations

Updating the <head> of your web page

Validating your web page

Validating your stylesheet

Uploading your two files to GitHub

Further resources

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.

Project Animation Google Fonts

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.

Project Animation Google Fonts

Google Fonts: Step-by-step

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

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

In this Tutorial you will work with these two files:

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

  1. In your text editor, open the file named base-4.html.
  2. Use the File | Save As command to save your base-4.html file with this new name:   base-5.html   You can now make changes to this new base-5.html file without affecting the base-4.html file from your previous exercise.
  3. In the <head> of your new base-5.html file, change the title as follows:
    <title>Responsive web page with Google Fonts</title>
    
  4. Also in the <head>, change the description as follows:
    <meta name="description" content="A sample responsive web page with examples of Google Fonts.">  
    
  5. And finally in <head>, change the stylesheet link as follows:
    <link rel="stylesheet" href="base-5.css">  
    
  6. You are now finished making changes to your base-5.html file.   Save the file with the File | Save command. Or press the Ctrl key (Windows) or Command ⌘ key (Apple) and press the s (for Save) key.
  7. 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.

  1. Use your web browser to go to this web address:   https://fonts.google.com
  2. In the menu across the top of the Google Fonts screen, click the option named Return to classic site. Project Animation Google Fonts
  3. In the Search Box near the top-left corner, type font name of Playfair Display. Project Animation Google Fonts
  4. Playfair Display appears as the first font listed. Click the red plus (+) icon at the right of its name to select this font. Project Animation Google Fonts
  5. 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. Project Animation Google Fonts
  6. Click anywhere on the font drawer to open it. The font drawer should now look as follows. Project Animation Google Fonts
  7. Next, click the Customize tab. Project Animation Google Fonts
  8. 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. Project Animation Google Fonts 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.
  9. On the Google Fonts screen, click the Embed tab at the top of the font drawer window. It should look as follows. Project Animation Google Fonts
  10. 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 rel="stylesheet" href="base-5.css">  
    <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.
  11. 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;
       ...
    }
    
  12. 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.

  1. 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. Project Animation Google Fonts
  2. 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. Project Animation Google Fonts
  3. 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. Project Animation Google Fonts
  4. 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', sans-serif;
       ...
    }
    
    ul li, ol li {
       font-family: 'Lato', sans-serif;
       ...
    }
    
  5. Save your HTML and CSS files, and view the web page in your browser. It should now look as shown below. Project Animation Google Fonts

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.

Project Animation Google Fonts

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.

Project Animation Google Fonts

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.

Project Animation Google Fonts

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.

Project Animation Google Fonts

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

Project Animation Google Fonts

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:

Tutorial RWD: Media Queries

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.

GitHub image

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.

  1. Go to this web page: https://validator.w3.org.
  2. Click the Validate by Direct Input tab. Tutorial RWD: Media Queries
  3. Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate. Tutorial RWD: Media Queries
  4. Click the Check button.
  5. 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.

  1. Go to this web page: https://jigsaw.w3.org/css-validator.
  2. Click the By direct input tab. Tutorial RWD: Media Queries
  3. Copy and paste your CSS file into the box named Enter the CSS you would like validated.
  4. Click the Check button.
  5. 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. Tutorial RWD: Media Queries
  6. 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.

  1. Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories. Upload to GitHub
  2. 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   GitHub Upload
  3. On the next screen displayed, near the centre of the screen, click the Upload files button. Project Animation Google Fonts
  4. Select or drag-and-drop the two files base-4.html and base-4.css to upload them to your GitHub account. Project Animation Google Fonts
  5. 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.

Further resources

How to use Google Fonts in your next web design project
by Hayden Mills at Free Code Camp News

Google Fonts for web developers
by Estefania Cassingena Navone at CodeBurst

How to: Google Fonts
from W3 Schools

Video: Google Fonts quick tutorial with HTML and CSS
from Code Instinct

Video: How to use Google Fonts in 2019
from Learn With Ali Hossain

Video: How to use Google Fonts
from XO PIXEL



Return to Contents.