Load Google fonts and Font Awesome icons locally (GDPR)

Beaver Builder accesses Google Fonts through its Content Delivery Network (CDN). As of Beaver Builder Plugin Version 2.1.4, Beaver Builder includes Font Awesome 5 with the plugin and loads it locally, but prior versions of Beaver Builder load the font using the Font Awesome CDN.

Both companies have been quoted to be compliant with GDPR in their use of personal information. If you still want to load the fonts locally, this article has the procedures to do so.

The following procedures show how to:

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

Load Google Fonts locally

This tutorial affects both the Beaver Builder 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.
  2. Stop all remote calls to Google Fonts made by Beaver Builder 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 Beaver Builder 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 Beaver Builder module, such as a Heading module, to see if the correct Google font shows up. If you’re using the Beaver Builder 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.

Load the Font Awesome 5 icons locally

You can set up your site to load the Font Awesome 5 icons locally by uploading the icons to your site and adding one code snippet in your child theme.

Note: As of Beaver Builder Plugin Version 2.1.4, Font Awesome icons are included with the plugin and loaded locally. Use this procedure only for earlier versions of the Beaver Builder plugin and only if you believe that GDPR prevents you from using a CDN.

To make Beaver Builder Plugin load Font Awesome 5 icons locally:

  1. Download the latest Font Awesome zip from https://fontawesome.com/
  2. Extract the archive and rename the top-level folder fontawesome.
    The extracted top folder for the free fonts has a name such as fontawesome-free-5.2.0-web, as shown in the following screenshot. That's the one you should rename.
  3. Create a folder called fonts in your site’s root directory, and upload the fontawesome folder from your local system into that folder.
    If you already created a fonts folder for the previous procedure for Google fonts, you can just upload the new fontawesome subfolder under that.
  4. Edit the functions.php file in your child theme and add the following code.
    Be sure to use a child theme so the code doesn't get overwritten when you update the theme.

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

Note: As of Beaver Builder 2.2. and Beaver Theme 1.7.2, Font Awesome 4 icons are not loaded at all. In earlier versions of the plugin and theme, if you're using Font Awesome 4 icons they were loaded through a CDN. To prevent the Font Awesome 4 icon set from loading in earlier versions of the Beaver Builder theme, see the article on dequeuing it.