A Brief Word On Fonts and Google Fonts
Computers require a set of fonts to be installed on their machine in order to render them and for this reason, relying on font-family is problematic. We want to make sure that everyone gets the same experience of the fonts. However, if they do not have the fonts specified in the css properties installed on their computer, then their browser will just render the site with the default fonts available on the local machine -- making your site look look inconsistent across devices. To get around the local installation problem of fonts, Google Fonts have a large reservoir of fonts to choose from, and will give you more options in allowing most people experience the font-family that you set in your CSS.
Google Fonts hosts these fonts online. When we link to them in our head the browser pulls in the font asset from the network so the browser can have access to the font family specified in the CSS. When pulling in your fonts from google fonts, you want to specify the font asset link first and definitely before the link to pull in your CSS:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
...
...
You need to make sure that the fonts are loaded in first before you can actually use them with the font-family property in your CSS.
When choosing a font you want one with a lot of styles -- bold, extra bold, italics, light, extra light etc... -- because you want to have a font that brings with it diversity. Some fonts only come in one style and for this reason you are limited in what you can do with this font. Usually we want more options than less. However, there is a trade off with picking a font and loading in lots of its different styles -- performance.
The more different styles of the same font you load the more data the browser has to pull in over the network which increases the time the browser takes to load its page. In short, page speed will suffer with the more font styles that you pull in via the head. Moreover, as the browser is loading these large font assets, your site visitor may experience FOUT - Flash Of Unstyled Text. In other words, as the site is loading the fonts specified in the head the default font that your computer has installed will be used to represent the font. When finally the browser loads the font assets, the text on the page will shift to a different font -- the one specified in your CSS in conjunction with the font asset that your browser loaded. This shifting of text, this FOUT, is generally speaking unpleasant and you want to either minimize FOUT or eliminate it completely.
By reducing the amount of styles you have per font and reducing the number of fonts your site is using, you can take significant steps to not only increasing the speed at which your site loads on a page but also reduce the risk of your site visitors experiencing FOUT.