How to import Google Fonts to HTML/CSS?

Question

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:

Do you have CSS saying it should _use_ that font anywhere? – jonrsharpe Jul 11 '21 at 11:14 — jonrsharpe, Jul 11 '21 at 11:14
No I don't. Ill look it up – Artur Müller Romanov Jul 11 '21 at 11:15 — Artur Müller Romanov, Jul 11 '21 at 11:15

score 1 · Accepted Answer · answered Jul 11 '21 at 11:15

1

add this before </head>

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

answered Jul 11 '21 at 11:15

heysujal

118
7

score 0 · Answer 2 · answered Jul 11 '21 at 11:17

0

You did not use font family in css, use like this

<style>
body, h1,h2,h3,h4,h5,h6,p {
  font-family: "Roboto", sans-serif;
}
</style>

answered Jul 11 '21 at 11:17

Frontend Dev Web Accessibility

215
2
9

How to import Google Fonts to HTML/CSS?

2 Answers2