When working with websites and typography, there are three ways to use fonts:
- use system default fonts
- use font from an online source, for example fonts.google.com
- embedd fonts in your website
All of them have benefits and drawbacks.
By using only system fonts, there are only a few to choose from. By using fonts from for example Google fonts, you can choose from almost 10 000 typeset with styles. Many of them only have 1 style, but some have all styles and weights you need. If you cannot find a typeface you like within the 10k on Google fonts, or you have a spesific font you would like to use, you can embedd your own.
You need a font file in different format, since various browsers offer various support for embedded fonts. If you use TTF/OTF or WOFF, most browsers supports them.
I find it convenient to use Google Fonts in my project. However, this raises privacy issues in EU now. It is still not forbidden to use externally hosted Google Fonts, so in the mental healt project, I have used two of them – Gloock and Source Sans pro.