Skip to main content
Practice

Importing Fonts (Google Web Fonts)

Wouldn't it be boring if all elements on your webpage used the browser's default font?

Google Web Fonts offers a variety of free web fonts that you can use.


  1. Choosing a Web Font

There are several ways to add fonts, but in this lesson, we will introduce how to add fonts using the <link> tag in the <head> section of an HTML document.

First, visit the [Google Web Fonts] site and choose a font you like.


  1. Importing the Font to Your Web Page

Copy the font name (e.g., Roboto, Open+Sans, Lato) from the URL field for the selected font, and add it to the href attribute of the <link> tag.

You can paste the font name after family= in the href attribute's value.

For example, you can import the Roboto font with the following code: href="https://fonts.googleapis.com/css2?family=Roboto".

HTML
<!DOCTYPE html>
<html>
  <head>
    <!-- Add the Google Web Fonts link here. -->
    <!-- Try using a different web font instead of Roboto -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto"
      rel="stylesheet"
    />
  </head>
  <body>
    ...
  </body>
</html>

  • If importing a font name that includes spaces, like Open Sans, replace the spaces with +, resulting in family=Open+Sans.

  • Note that some fonts may not support all languages. You can filter for Latin or any other language support on the web fonts filter options.


  1. Using the Font in CSS

After adding the font link, you can specify the font name in your CSS through the font-family property to apply the font.

Example Code:​

CSS
body {
  font-family: 'Roboto', sans-serif; /* Attempt to use 'Roboto' font, fallback to sans-serif if not available */
}

Use the font name without + in the font-family property.

(e.g., Open+Sans -> Open Sans)

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.