Adding Google Fonts

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:

GoogleFonts Roboto

This will add it to your font selection.

GoogleFonts FontSelection

Then click on the selection title to open it.

GoogleFonts RobotoSelection

Then copy the element into the 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.

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

You can also load the fonts via the "Resources" tab on the left, when viewing the full JSFiddle example.