Integrate Divi GDPR & Google Fonts locally | in 10 seconds

The Divi Theme from ElegantThemes is by far one of the best-selling and most used themes for WordPress. Unfortunately, some functions of the popular theme are incompatible with the GDPR. This primarily includes the integration of Google Fonts, which are integrated into Divi via URLs from Google. However, with this integration, the dynamic user IP address is transmitted to Google. Note: Are you not a Divi user? Here you will find all information regarding WordPress themes & Google Fonts in general. There is also a plugin solution for the automatic integration of Google Fonts for WordPress websites without Divi. Just follow this link. In this article we would like to explain to you why using Google Fonts via the Google CDN is problematic, how you can tell whether your website uses Google Fonts and of course how you can integrate Google Fonts locally. If you want to go straight to a solution, check out the plugin “Divi GDPR & Google Fonts” on.

The judgment of the Munich Regional Court

However, with the judgment of January 19, 2022, the Munich Regional Court decidedthat passing on the dynamic IP address to Google when using Google Fonts without the explicit consent of the person concerned justifies a claim for damages. A legitimate interest was not sufficient here. The website visitor was awarded €100 plus interest as compensation. Furthermore, the website operator was sentenced to cease and desist. A repeat offense could result in a fine of up to €250,000.

How do I recognize Google Fonts in my Divi / WordPress website?

Divi integrates the Google Fonts via Google’s content delivery network (CDN for short). You can easily identify this integration in your own website by searching for the URL “fonts.googleapis.com” or “fonts.gstatic.com” via the browser’s developer console. The developer console can be opened in most web browsers using the key combination “CTRL + ALT + I”, where Google Fonts can then be easily identified via the network tab, here is an example: However, if you use Divi as a theme, you don’t have to look too hard or long. Divi uses Google Fonts by default, so they are always there unless you explicitly turn them off. However, this usually leads to incorrect representations on the website because the fonts are then missing. The only exception would be if Google fonts were not used from the start. The option to turn off Google Fonts is in the Divi options: Divi > Theme Options > Use Google Fonts But be careful! If you simply switch off this option and your website previously used Google Fonts, the typeface of your website will now change. Depending on the fonts used, major misrepresentations are possible.

How can Google Fonts be integrated into Divi in ​​a GDPR-compliant manner?

There are basically two ways to integrate Google Fonts into Divi in ​​a GDPR-compliant manner, provided you don’t want to do without them completely. As a rule, doing without is not an option because, in addition to high compatibility, Google Fons offers a good look for your own website. The two options are as follows:

Use of our plugin “Divi GDPR & Google Fonts”

The plugin is available from €29 and just needs to be installed and activated. The plugin then automatically takes care of the local integration of Google Fonts into Divi. No major manual steps or configuration is necessary. The integration effort is maybe 10 seconds to upload and click “Activate”. The plugin also optimizes a few other points that bring Divi closer to a GDPR-compliant theme. More details can be found on the plugin page: Divi GDPR & Google Fonts. https://youtu.be/yd-pqkII4PE

Manual integration via a child theme or plugin

Manual integration via a child theme or plugin requires a basic understanding of web and WordPress development and associated technical understanding. Furthermore, this solution is not a permanent one. If new/different fonts are selected via the Divi Builder, this step must always be repeated and carried out again. The integration effort varies extremely depending on the technical skills of the respective user. In the following we would like to introduce you to both options. If you have not had any technical contact with FTP programs, PHP, CSS, etc., we would like to recommend our plugin to you; it will save you a lot of work and possibly frustration when trying it out.

The 10 second integration via the “Divi GDPR & Google Fonts” plugin

You can buy and download the plugin directly from our plugin store. Immediately after ordering, you will receive the plugin file, which you can install in WordPress via “Plugins > Install” and the “Upload plugin” button. https://youtu.be/yd-pqkII4PE After uploading you need to activate the plugin. The activation link will be displayed immediately after upload. The work is almost done. Now you just have to check the settings of our plugin again. After activation, you can find them under “Divi > Theme Options” and there in the “GDPR” tab. Enter your license key here and adjust the settings if necessary. You can now click on the “Preload fonts now” button to initially load the Google Fonts directly. If you don’t do this, the plugin will do this automatically when browsing in the frontend or once a day via cron job.

Divi GDPR & Google Fonts - Settings

 

Manual integration via your own plugin or child theme

If your Divi website already has a child theme, insert the CSS codes and font files mentioned below into your child theme, then you do not need a separate plugin.

Note fonts and styles

The first thing you need to do is make a note of all the Google Fonts and font styles you use so that you know which fonts you need to download.

Deactivate Google Fonts in Divi

Open Divi’s Theme Options and turn off the “Use Google Fonts” option.

Creating the plugin (skip if child theme exists)

Open the /wp-content/plugins/ folder with an FTP program. Now create a new folder called “divi-google-fonts”. Now create another folder in the newly created folder, which will be named “fonts”. In addition, two files are created, one “divi-google-fonts.php” and “fonts.css”. The structure should then look like this:

• /divi-google-fonts
  • /fonts/
  • /fonts.css
  • /divi-google-fonts.php

Open the file “divi-google-fonts.php” and paste the following code there: You can then activate the plugin in your WordPress system under “Plugins > Installed Plugins”. Look for the entry “Local Google Fonts for Divi by Bajorat Media.”

Download Google Fonts

Use that Google Webfonts Helperto load the necessary font files and generate the CSS. You now need the list that you created at the beginning. Find each font used individually from the list, click on the required “Charsets” and select the desired and used styles. Now look for the input field for the folder name below the CSS display, this is labeled “Customize folder prefix (optional):”. Enter “fonts/” here to match the structure of the small plugin. Once that’s done, copy the code at “3. Copy CSS” and paste it into the fonts.css of the plugin. Then download the actual font files. The download button is located under the field with the CSS information. The font files must now be unpacked and uploaded to the plugin’s “/fonts/” folder. You must repeat these steps for each Google Font that you currently use in Divi or would like to use in the future. If you change a font in the Divi Builder at another time, you will always have to go through this step manually again and adjust the fonts. If these manual steps are too much work for you and, above all, too inflexible, please feel free to test our plugin “Divi GDPR & Google Fonts”, this performs all these steps automatically and monitors the Divi website for changed fonts and downloads them automatically.