Let’s start customizing HTML by changing fonts.

We will use the free font collection called “Google Fonts”.

It has many hundreds of fonts available for free. So choose one, like “Roboto” for example. Click the “+” in the upper right corner:

This will add it to your font selection.

Then click on the selection title to open it.

Then copy the <link> element into the <head> of your html file, like this:

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1>Lorem Ipsum Title</h1>
  </body>
</html>

Now you can just set the new font to any text element with CSS. Copy the second part in the Font Selection window and here I will apply it inline, to keep the example minimal.

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1 style="font-family: 'Roboto', sans-serif;">Lorem Ipsum Title</h1>
  </body>
</html>

Now you should see the font change to the new one.

See the Pen GRJPwWE by itsprogramming (@itsprogramming) on CodePen.

Now you can try to change the font via the CSS file, if you get stuck, I have added the proper CSS version below:

See the Pen Google Fonts Example 2 by itsprogramming (@itsprogramming) on CodePen.