Loading Google fonts and Font Awesome icons locally (GDPR)

In use, Woo360 offers the capability to access Google Fonts and Font Awesome through their Content Delivery Networks (CDNs), which is standard practice. Both companies have been quoted to be compliant with GDPR in their use of personal information. Therefore, whether you want to use these procedures to load Font Awesome and Google fonts locally without accessing their CDNs is a personal decision based on how you interpret the GDPR.

These tutorials show how to:

  • Load the Font Awesome icons locally
  • Download each Google font file and install it locally

Load the Font Awesome 5 icons locally

You can set up your site to load the Font Awesome 5 icons locally with just one download and one code snippet in your child theme. (Make sure you have a child theme installed.)

  1. Download the latest Font Awesome zip from https://fontawesome.com/
  2. Extract this archive and upload it to your site in a folder called fonts in your site’s root directory, as shown in the following screenshot.
    You can also use this folder to upload Google fonts in the second tutorial.
  3. Edit the functions.php file in your child theme and add the following code.

This code dequeues the CDN version that Woo360 loads by default and enqueues your new local version.

Dequeue Woo360 Theme's use of Font Awesome 4

If you're using Woo360 Theme you may still find that Font Awesome 4 is being loaded. Here's the code to dequeue it.

Load Google Fonts locally

This tutorial affects both the Woo360 plugin and the theme. It changes the way the actual font files are delivered. It doesn't change the way that fonts are selected in modules and in the Customizer.

The easiest way to generate both the CSS and the web fonts is to use the Google Webfonts Helper site, which we've included in the steps here.

  1. Create a folder called fonts in your site's root directory.
    If you already created this folder for the first tutorial, you can skip this step.
  2. Stop all remote calls to Google Fonts made by Woo360 by adding the following code to your child theme's functions.php file.

    Note: The entire list of Google fonts will still be available in the dropdown list in Woo360 modules and Customizer fields, but because this code stops all remote calls, only the fonts you add with this procedure will work in the rendered page.
  3. Do all of the following steps for each font you plan to add.
  4. Go to the Google Webfonts Helper site at https://google-webfonts-helper.herokuapp.com/fonts.
  5. In the menu on the left, select a Google font.
    In this tutorial, we'll select the font called Bungee.
  6. In the first two sections, select the charsets and styles you want for that font.
  7. In the third section called Copy CSS, in the Customize folder prefix (optional) field, change the font path to the full URL to the fonts folder, ending with a forward slash, as shown in the following screenshot.
    This changes the path at various places in the CSS; check to make sure it matches where you placed the fonts folder.
  8. Copy the CSS in the box in the third section.
  9. Click the button in the fourth section to download the zip archive of the web font files for that font.
    The download button is shown in the previous screenshot.
  10. Add the CSS to the place where you normally add global CSS rules.
    See the article for where to put CSS code
  11. Extract the archive you downloaded and upload the individual font files (eot, svg, ttf, woff, woff2) to your fonts folder, as shown in the following screenshot.
  12. Test by adding the font to a Woo360 module, such as a Heading module, to see if the correct Google font shows up. If you're using the Woo360 Theme, you can test by selecting that font in Customize > General > Headings or Customize > General > Text.
    Remember that although you're still seeing the full Google font list, only the ones you've uploaded to your site and provided the CSS for will work.