1. Remove the Google Fonts CDN links

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

FavThemes tutorial for google fonts locally for templates

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:

FavThemes tutorial for google fonts locally for templates example

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;
}
If you choose to load Google Fonts locally, they will no longer be loaded by or work with the template's settings (back-end parameters). Each new Google Font you want to use needs to be loaded locally and manually following the instructions detailed above.

The Joomla! name is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries. FavThemes is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.