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
and select font weights you need.