1. Remove the Google Fonts CDN links

Find the Google Font code inside the index.php file and delete it:

2. Add the Google Fonts inside the template folders

2.1. Go to Google Fonts and choose the font you want to use and download it.

2.2. Access the template's files and folders and create a new folder, called "fonts" or something similar.

2.3. Unzip the font archive you downloaded from Google Fonts and copy the folder inside the new "fonts" folder.

2.4. Access theme.css file inside the template's CSS folder and copy the CSS for the font at the beggining of the file.

To see the CSS you need to copy, access the link provided by Google Fonts. For example, for the Lato font, the code provided is:

Accessing the link:

https://fonts.googleapis.com/css?family=Lato

gives us this CSS code:

/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

You need to change the source with the link where your Google Fonts are hosted locally, something like:

https://yourwebsite.com/templates/templatename/fonts/fontname

For our Lato example, the source link would change to:

/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: https://yourwebsite.com/templates/templatename/fonts/Lato-Regular.ttf;
}

2.5. Choose the CSS element you want to assign the new Google Font and add the font-family code generated by Google Fonts to its CSS properties:

.css-selector {
  font-family: 'Font Name', serif;
}

For our Lato example, the code we'll be adding will be:

.css-selector {
  font-family: 'Lato', sans-serif;
}