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:

<link href="" rel="stylesheet">

and then in our CSS code we use

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:

<link href=",500&display=swap" rel="stylesheet">

To do that click on the customise button

and select font weights you need.