How to import google fonts

When adding a google font to our page, we need to make sure to import font weights and font styles for that family, otherwise font-weight or font-style property won’t have any effect. Some parts of font family might be missing. If we import Roboto family like this:

1
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

and then in our CSS code we use

1
font-weight: 500;

the element will still have the default font-weight because 500 was not imported with google fonts. If we want to use font-weight: 500; we need to import it as well:

1
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">

To do that click on the customise button
image

and select font weights you need.

My two cents are to import font styles and font-weights you need, not just the font-family.