lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# 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.

<br />

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](https://fonts.google.com/)] site and choose a font you like.

<br />

2. **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 title="HTML"
<!DOCTYPE html>
<html>
  <head>
    
    
    <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.

<br />

3. **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 title="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`)

To add fonts to a web page using Google Web Fonts, you need to use a <link> tag within the <head> section of the HTML document to specify the font URL. This method allows you to apply various fonts to your web page.

### To load fonts onto a web page using Google Web Fonts, a <link> tag must be added to the <head> section of the HTML document.

Importing Fonts (Google Web Fonts)

Example Code:

To load fonts onto a web page using Google Web Fonts, a tag must be added to the section of the HTML document.