Where to import font families

,

When we decided which google font we want, we need to add it to our code. My students use @import in css/scss and <link /> in HTML, sometimes both at the same time.

1
2
3
4
5
6
7
 <!-- index.html -->
<head>
 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>

/* main.scss */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

If we choose to use <link />, there is no need to use @import as well. That would mean that we are importing that font family twice.

The thing about the @import directive, is that it waits for all the fonts to be loaded and only then will it load the rest of the content. Read this stack overflow answer to find more about it. The <link /> should be used because it is faster than @import.

1
2
3
4
 <!-- index.html -->
<head>
 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>