How to import Google Fonts to HTML/CSS?

I can't get the Roboto font to work in my HTML file. If I understand correctly, Google's instruction are:

"Copy these lines into your head tag":

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

This is my HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
<body>
    <h3>This is a heading</h3>
    <p>This is a string.</p>
</body>
</html>

Instead of the Roboto font, the website shows the standard font:

Solution

add this before </head>

<style>
body {
  font-family: "Roboto", sans-serif;
}
</style>