Users are no longer limited to web-safe fonts as web fonts don’t require users to have fonts installed. There are two methods of using web fonts: using an internal or external source. I will be explaining the differences between the two.
Internal font sources are downloaded font files on your device that are included in your project’s file directory. To use internal fonts in the CSS, users need to state it within the style sheet and link it to the font files using the @font-face method.
Font-face is used to set up the font names and create a link to your font files. The first statement is font-family to state the font name. You can pick whichever font name you decide for an internal font source. Next, users should use the src property to create a link to the actual font file.
Once you’ve declared the downloaded font in your font-face declaration, you can add it to the font stack just like any other web-safe font.
External sources are third-party services. Users don’t need to download any files or include them in your project’s directory. With external sources, you can link directly to the font CSS files which are hosted online as part of the service. There are paid services but considering a free option, Google Fonts has a fairly good selection.
You can browse through the page and filter by category, and if you know of a specific font you can also just do a search for it. Plus, users are offered an unlimited number of fonts to use.
If you’re interesting in a more in-depth tutorial on how to use web fonts this video gives an excellent explanation: