1. Remove the Google Fonts CDN links

Find the Google Font code inside the main .php file of the extension (usually named after the extension, for example mod_favcontent.php) and delete it. The Google Font code inside the main .php file looks like this:

FavThemes tutorial for google fonts locally for extensions

2. Add the Google Fonts and inside the extension folders

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

2.2. Access the extensions'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 the main .css file inside the extension's CSS folder and copy the CSS for the font at the beggining of the file. The main CSS file is also usually named after the extension, for example FavContent has a favcontent.css 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/modules/mod_extensionname/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/modules/mod_extensionname/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 extension'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.