IBAT College Diploma in Web Design, Brendan Munnelly
Brendan Munnelly, IBAT Lecturer in Web Design

bmunnelly@ibat.ie

Working with Google Fonts

Linking your web pages to Google Fonts and formatting text by adding Google Font names to your stylesheets.

Learning Goals

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

  • Select font-weight/style combinations for selected font-families (typefaces) from the Google Fonts website.
  • Add selected Google Fonts CSS links to the <head> of a web page.
  • Add selected Google Fonts names to the CSS font-family property in a stylesheet file.

You can view finished versions of the four sample web pages you will update with Google Fonts in this Tutorial by clicking the links below. The finished samples will each open in a new tab of your web browser.

Sample image page-4.html
Sample image page-5.html
Sample image page-6.html
Sample image page-7.html

You created these sample web pages and their linked stylesheets in the previous Working with Images Tutorial.

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.

Below is a screenshot of the Google Fonts home page at:

https://fonts.google.com

Introduction to Google Fonts

To preview a particular font, click on it. To see how a few words of text will look when styled in the selected font, type your chosen text in the Type here to preview text box.

Introduction to Google Fonts

Google Fonts: the three steps

There are three basic steps to using Google Fonts. They are as follows.

  1. Select your font: From the Google Fonts website you choose the weight(s) and style(s) of the font-family you want to use.
  2. Copy-and-paste: You copy the HTML code generated by the Google Fonts website into the <head> of every page on which you want to use your chosen font(s). Introduction to Google Fonts In the example above, the name of the font is ‘Merriweather’.
  3. Update your CSS file: Edit the font-family style rules in your CSS file with the names of your chosen fonts.   For example, to use the ‘Kinsta’ font for your <h1> headings, you would edit the h1 selector in your CSS file as follows. Introduction to Google Fonts To use the ‘PT Sans’ font for your <h3> headings, you would edit the h3 selector in your CSS file as follows. Introduction to Google Fonts And if you wanted to use the ‘Work Sans’ font for your text paragraphs, you would edit the p selector in your CSS file as follows. Introduction to Google Fonts Note that the font name is always wrapped in a pair of single quotation marks (‘ ’).   You can also see that every Google Font name is followed by a comma (,) and what is called a fallback font – either serif or sans-serif. This is the font that is displayed when the web page is viewed without a live Internet connection.

As with much else, there are fashions and trends in fonts. Here are the more widely-used serif and sans-serif fonts at the moment.

Introduction to Google Fonts

Working with the van Gogh web page

In this section, you will work with the sample page-4.html web page and its linked style-4.css stylesheet.

Obtaining the Google Fonts code

Your first task is to go to the Google Fonts website, select the weight/styles of your required font-family, and then to copy the related HTML code.

  1. In your web browser, go to the Google Fonts website at the address below:   https://fonts.google.com
  2. In the Search box at the top of the screen, type the font-family (typeface) name of Merriweather. Sample image Next, in the search results displayed in the lower half of the screen, click on Merriweather.
  3. At the top-right of the screen click the Get font button. Sample image
  4. Next, click the Get embed code button. Sample image
  5. You are now shown a list of the styles and weights available for your selected font-family. For Merriweather, there are eight in total.
  6. Change the first on/off switch from All to None. Sample image
  7. Now, select only the following three font weight/style options:   Regular 400
    Regular 400 Italic
    Bold 700     Sample image
  8. At the right of the screen, as you select each font weight/style, you can see that Google Fonts is creating the relevant HTML code. Sample image After selecting the three font weights/styles, move your mouse to the box in the lower-right corner, and then click the Copy icon to copy the HTML code.
  9. You can now close the Google Fonts tab in your web browser.

Updating your web page with the font link

Next, you will paste the HTML code you copied from Google Fonts into your web page.

  1. In VS Code, open the page-4.html web page.
  2. In the <head> of the web page, paste the copied HTML code just before the closing </head> tag.   Optionally, add the following comment line just above the pasted Google Fonts code. 
    <!-- Google Fonts stylesheet -->
    Your web page <head> should now look similar to that below. Sample image
  3. Save your page-4.html web page.

When you view the page-4.html page in a web browser, you can see nothing has changed. For your selected Google Font to display, you also need to update the web page's linked stylesheet file.

Updating your stylesheet with the font name

Your final task is to update the linked stylesheet with the name of the Google Font you want to use in your web page. Here are the steps.

  1. In VS Code, open the following stylesheet file:   style-4.css
  2. In the stylesheet, you can see that, for all four CSS selectors (h1, h2, h3 and p), the font-family property has the same value of serif.   Within each of the four selectors, delete the font-family style rule (property and value pair). Sample image
  3. Save your style-4.css file and view the page-4.html page in your web browser.   You can see that the web page looks exactly as before. That is because serif is the default font-family set by all web browsers. You never actually need to set this font in a stylesheet.
  4. For this web page, you will use only a single font-family for all the text: headings, sub-headings and paragraphs.   In VS Code, near the top of your stylesheet, update the body selector as shown below. Sample image The order in which you type the two style rules does not matter.
  5. When finished, save your style-4.css file, and view the page-4.css web page in your browser.
  6. As you can see, for the same CSS font-size value, the Merriweather font is displayed at a slightly larger size than the default serif font.   In the style-4.css file:
    • For the h2 selector, decrease the CSS font-size property to 24px.
    • For the p selector, decrease the CSS font-size property to 20px.
  7. When finished, save your style-4.css file, and view the page-4.css web page in your browser.

Task completed. You can now close the page-4.html and style-4.css files in VS Code.

Click page-4.html to view a finished sample of this web page in a new tab of your web browser.

Working with the Tourism web page

In this section, you will work with the sample page-5.html web page and the sample style-5.css stylesheet. You will add two fonts: Oswald (for headings and sub-headings) and Lato (for text paragraphs).

  1. In your web browser, go to the Google Fonts website at the address below:   https://fonts.google.com
  2. In the Search box at the top of the screen, type the font-family (typeface) name of Oswald and then click this font-family in the search results.   This is a condensed (‘narrow’) font-family suitable for headings. For paragraphs of text, however, it can be difficult to read.
  3. At the top-right of the screen, click the View selected families icon to de-select any previous font choices. Sample image
  4. Next, select the Bold 700 style/weight of the Oswald font. Sample image
  5. In the Search box at the top-left of the screen, type the font-family name of Lato and then click this font-family in the search results.
  6. Next, scroll down the Google Fonts screen and select the following four styles/weights for this font-family:   Regular 400
    Regular 400 italic
    Bold 700
    Bold 700 italic
  7. When finished, copy the HTML code. Sample image You can now close the Google Fonts tab in your web browser.
  8. In VS Code, open the following two files:   page-5.html
    style-5.css
  9. In the <head> of the web page, paste the following lines just before the closing </head> tag. Sample image Optionally, type a comment line above the pasted Google Fonts link.   You can now close the page-5.html file in VS Code.
  10. In VS Code, display your style-5.css stylesheet.
  11. Within each of the three selectors (h1, h2, and p), update the font-family style rules as follows: Sample image As shown above, add a letter-spacing style rule to the h2 selector.
  12. When finished, save the style-5.css file, and view the page-5.html web page in your browser.

Click page-5.html to view a finished sample of this web page in a new tab of your web browser.

Working with the Smoothies web page

In this section, you will work with the sample page-6.html web page and the sample style-6.css stylesheet.

  1. In your web browser, go to the Google Fonts website at the address below:   https://fonts.google.com
  2. In the Search box at the top-left of the screen, type the font-family (typeface) name of Neucha and then click this font-family in the search results.
  3. As with many decorative fonts, Neucha has only a single style/weight.
  4. Google Fonts remembers your previous font choices. At the top-right of the screen, click the View selected families icon to de-select any previous font choices.
  5. Next, use select the one style/weight of the Neucha font.
  6. Copy the HTML code at the right of the screen. You can now close the Google Fonts tab in your web browser.
  7. In VS Code, open the following two files:   page-6.html
    style-6.css
  8. In the <head> of the web page, paste the following lines just before the closing </head> tag. Sample image Optionally, type a comment line above the pasted Google Fonts link.   You can now close the page-6.html file in VS Code.
  9. In VS Code, display your style-6.css stylesheet.
  10. Within each of the four selectors (h1, h2, h3 and p), delete the following font-family style rule (property and value pair). Sample image
  11. For this web page, you will use only a single font-family for all the text: headings, sub-headings and paragraphs.   In VS Code, near the top of your stylesheet, update the body selector as shown below. Sample image
  12. When finished, save the style-6.css file, and view the page-6.html web page in your browser.

Click page-6.html to view a finished sample of this web page in a new tab of your web browser.

Working with the Software web page

In this section, you will work with the sample page-7.html web page and the sample style-7.css stylesheet. You will add two fonts: Domine and PT Sans.

  1. In your web browser, go to the Google Fonts website at the address below:   https://fonts.google.com
  2. In the Search box at the left of the screen, type the font-family name of Domine and then click this font-family in the search results.
  3. Google Fonts remembers your previous font choices. At the top-right of the screen, click the View selected families icon to de-select any previous font choices.
  4. Next, select the Bold 700 weight of the Domine font. As you can see, there is no italic style available for this font-family. You have now selected the first of the two fonts you require.
  5. Scroll back up to the top of the Google Fonts screen and click the Google Fonts option.
  6. In the Search box at the top of the screen, type the font-family name of PT Sans.
  7. Next, select all four styles/weights for this font-family:   Regular 400
    Regular 400 italic
    Bold 700
    Bold 700 italic
  8. When finished, copy the HTML code at the right of the screen. You can now close the Google Fonts tab in your web browser.
  9. In VS Code, open the following two files:   page-7.html
    style-7.css
  10. In the <head> of the web page, paste the following lines just before the closing </head> tag. Sample image Optionally, type a comment line above the pasted Google Fonts link.   You can now close the page-7.html file in VS Code.
  11. In VS Code, display your style-7.css stylesheet.
  12. Within each of the four selectors (h1, h2, h3, and p), update the font-family style rules as follows: Sample image
  13. When finished, save the style-7.css file, and view the page-7.html web page in your browser.

Click page-7.html to view a finished sample of this web page in a new tab of your web browser.

Uploading your files to GitHub

After finishing your web pages and stylesheets, you are now ready to upload them to your account on GitHub.

  1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now. github-signin
  2. On your GitHub home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io github-signin
  3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it. github-upload-portfolio
  4. From the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  5. In File Explorer (Windows) or Finder (Apple Mac), drag-and-drop your index.html file and your 📁 assets and 📁 exercises sub-folders to upload them to your repository on GitHub. Introduction to HTML
  6. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
  7. Finally, click the green Commit changes button to upload your files. Project Animation Google Fonts

Your updated four sample pages are now published on GitHub at web addresses similar to the following:

https://username.github.io/exercises/page-4.html
https://username.github.io/exercises/page-5.html
https://username.github.io/exercises/page-6.html
https://username.github.io/exercises/page-7.html

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

Further resources

25 Most Popular Google Fonts
from UX Planet

The Ultimate Collection of Google Font Pairings
from Reliable PSD

Top 10 Beautiful Google Font Combinations in 2020
from Linkbot Design

The Top 50 Google Font Pairings
from Page Cloud

Typography Resources
from Fontpair

Web Typography 101
from Andréa Crofts

Thinking with Type: Free Online Book
from Ellen Lupton