lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# Loading Fonts (Google Web Fonts)

Wouldn't it be dull if all elements in a web page used only the browser's default fonts?

`Google Web Fonts` offers a variety of web fonts that are free to use.

<br />

## Selecting a Web Font

There are several ways to add fonts, but in this session, we'll introduce adding fonts using the `<link>` tag in the `HTML document's <head>` section.

First, visit the <a href="https://fonts.google.com/" target="_blank">Google Web Fonts</a> website and choose a font that you like.

<br />

## Loading Fonts into a Web Page

Copy the `font name` (e.g., Roboto, Lobster, Lato) from the `URL address field` of the font you chose and add it to the `href` attribute of the `<link>` tag to load it.

The font name should be placed after `family=` in the href attribute value.

For example, in the code below, you can load the Lato font with `href="https://fonts.googleapis.com/css2?family=Lato"`.

```html title="HTML Code to Load a Web Font"
<!DOCTYPE html>
<html>
  <head>
    
    
    <link
      href="https://fonts.googleapis.com/css2?family=Lato"
      rel="stylesheet"
    />
  </head>
  <body>
    ...
  </body>
</html>
```

For fonts with spaces, such as `Open Sans`, replace spaces with `+` as in `family=Open+Sans"`.

Some fonts may not support certain languages.

By selecting `English` or a relevant language in the web font filter, you can see fonts supporting those languages.

<br />

## Using Fonts in CSS

After adding the font link, specify the font in CSS using the `font-family` property.

```css title="Using Web Fonts in CSS"
body {
  font-family: 'Lato', sans-serif; /* Attempts to use 'Lato' font, defaults to sans-serif if unavailable */
}
```

For the font name within `font-family`, use the name without `+`.

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

To add fonts to a web page using Google Web Fonts, you should use a <link> tag in the <head> section of your 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, you need to add a `<link>` tag in the `<head>` section of your HTML document.

Loading Fonts (Google Web Fonts)

Selecting a Web Font

Loading Fonts into a Web Page

Using Fonts in CSS

To load fonts onto a web page using Google Web Fonts, you need to add a <link> tag in the <head> section of your HTML document.

To load fonts onto a web page using Google Web Fonts, you need to add a `<link>` tag in the `<head>` section of your HTML document.