There are a million sites on the internet but only a few will appeal to you. Among the many other factors responsible, fonts are responsible for better readability. In fact, according to various studies, Helvetica is one of the most used custom fonts. Typography is another battle fought on other grounds.

But you can also employ custom fonts. Custom Fonts help in providing a unique style and character to the site. Minimalistic custom fonts would also help with the performance of the site. 

Embed an Online or External Font Source

This method creates a link to an external source such that the fonts are not downloaded rather are linked. Let's see how we can implement such fonts.

We will demonstrate that using Google fonts. The first thing we will need to do is find our desired font. In this case, we will be using the Lato font.

Now, click on the Select This font button which would open up a selection drawer window and copy & embed the following link as highlighted in the figure below. 

<link href="https://fonts.googleapis.com/css?family=Lato" rel=" stylesheet">

Navigate to the theme folder and insert the following line in the info.yml file as shown.
-customtheme/fonts

Open the libraries.yml file and paste the embed link copied earlier but make the alterations as necessary such that the structure of the link is similar to the one shown below.

Finally, in the style.css file, describe the properties of the font and clear cache for the font to take effect.

Link to an offline/internal font source

In this method, we are going to understand how we can include downloaded fonts on our site. To do so, all we need to do is implement minimal changes to the style.css file. We would need to use the font-face keyword as shown below:

@font-face{
src:url(fonts/Lato-Regular.ttf);
font-family: sans-serif;
Using Modules:

Font-your-face: Font-your-face uses an interface for easy implementation of custom fonts on a site. let's see how we can use font your face module to change the default fonts bundled with Drupal and use custom fonts that we want.

Installing font your face module requires a normal installation of the module. To access the configuration window of this module, click on the appearance tab which would reveal the font your face tab.

Browse: The browse section contains all the downloaded fonts that are available for implementation on the site. 

Font Display: This section is used to create font profiles which support customised labelling, the font style to be used, fall-back fonts in case the custom fonts fail to load, pre-set selectors which defines the sections that will be affected by the fonts and the themes that the fonts would work with.

Custom Fonts: This section enables the user to download font styles to be directly downloaded from the internet or other sources in .woff (Web Open Font Format) and use it in their sites.

Settings: On the settings tab, we can import custom fonts by selecting a font provider from the list.

What is an API Token?
API tokens allow applications to access your Typekit account, including creating new kits and editing the kits you've already created.

Advantages and Disadvantages

1. Online/External Method
    
   • Advantages:
     • Speed Load: This method leads to faster load times because resources are downloaded directly and the necessary resources are loaded.
     • Will load: The custom fonts will always load correctly because the files are not stored locally and therefore, the chances of those files getting corrupted are quite minimal.
     • No missing files: Since the font files are web hosted, so, the possibility of missing files is close to none.
        
   • Disadvantages
     • No Connection = No fonts: If the connection is not established, then, there would be a problem with the fonts not being loaded.
     • Slow Load: Connections with lower bandwidth are likely to incur longer load times.
     • Complicated: This process is a bit complicated for newbies because of the amount code implementation that is required to make it work.
        
2. Offline/Internal Method
    
   • Advantages:
     • No Connection = No Problem: Connection with the font provider is not required since the fonts are already available.
     • Simple: The implementation of this method is quite simple because of the minimal amount of coding required.
     • Availability: The fonts will always be available as its removal by the provider from the inventory won't affect it in any way as the font file will always be available.
        
   • Disadvantages:
     • Corrupt Font Files: Font files may get corrupted and thus fail to load.
     • Longer Load Times: Server downtime is going to adversely affect the load time of the site since the font files are also to be loaded from the same server.

An administrator is required to keep all the factors involved while implementing custom fonts on their sites. Let me know in the comments below which custom font did you use.