Google Fonts and the GDPR: Why you should host fonts locally
If you are a little familiar with the GDPR and the TTDSG you will certainly come across the fact that the use of Google Fonts also leads to data exchange with the USA (third country in terms of data protection) and this without consent Not data protection compliant is.
A common, unconscious problem is often the WordPress theme or Plugin. These often use Google Fonts as the font. This is of course convenient, but illegal in Europe.
The simplest and best solution, however, is to use the Integrate Google Fonts locally in Divii.e. save them on your own server. Google Fonts are very easy to download and then only need to be integrated and used correctly. This can be done in just a few steps.
I will now show you exactly how to do this step by step using the "Divi" theme from ElegantThemes.
Why are Google Fonts not data protection compliant?
- Transmission of the IP address (= personal data)
- Simple solution: Host or use Google Fonts locally
Host and integrate Google Fonts in Divi locally - without a plugin
Download the desired Google Font
The Google fonts are available at https://fonts.google.com available for download free of charge.
Tip: Use a variable fontas these - as the name suggests - work in all variants. As you can see in of this listing most Google Fonts are available as variable fonts.
By the way: Google now also has icons in its portfolio: https://fonts.google.com/icons.
Upload Google Font or fonts to Divi
Divi makes it very easy for you to upload your own fonts and then use them globally on the website.
All you have to do is navigate to the settings of a module in the Divi Builder for any page and open the "Text" toggle switch in the Design tab. There you will find the setting "Text font" and can upload your own fonts by clicking on "Upload".
Now select the previously downloaded font in tff or otf format, give it its real name and click on upload.
The following error message often appears "File type is not supported for security reasons." or "File type not permitted for security reasons.". There is a simple solution for this too.
Solution to the problem "File type not permitted or not supported"
To enable the upload of the font you must Temporary the wp-config.php in your WordPress directory by one line of code.
To do this, navigate via an FTP client of your choice (e.g. FileZilla), your host (e.g. WP Space) or WordPress plugin (e.g. WP File Manager) to the root directory of your WordPress installation and open the file wp-config.php (with an editor such as Brackets).
There must Temporary a line of code can be inserted:
This command now allows you to upload your fonts as described in the previous paragraph.
Now that you have uploaded the font, delete the command again from wp-config.php!
Inserting the CSS from the Google Webfontshelper
Once the Google font is on your server, the corresponding CSS code must be inserted in the style.css for Google Fonts. Don't worry, this is also copy & paste only.
If you have uploaded the font as described, you will find your fonts in the following path of your WP installation: /wp-content/uploads/et-fonts/
You add this to the Google Webfontshelper under "Customize folder prefix". The tool will then set your path in the CSS code and you just have to copy it (Windows: CTRL + C or Mac: CMD + C).
We have to insert this code at the end of the Style.css and save it. If you have a Child Theme add it there (wp-content/themes/child-theme-name) in the style.css. If you are not using a child theme, add the CSS in the main theme folder /wp-content/themes/divi.
That's it already. You have now integrated your font locally. If you use several fonts, simply repeat this process.
5. deactivate the use of Google Fonts in the Divi Theme options
You can deactivate the use of Google Fonts directly in the Divi settings. To do this, navigate to Theme Options - General and deactivate the "Use Google Fonts" option.
Attention, the translation is a little misleading. "Deactivate" can be read here as "Deactivated". The setting should therefore look like this:
6. check whether your fonts are really used locally
Last but not least, we should finally check whether your site really no longer uses Google Fonts anywhere (note: some plugins use Google Fonts. However, many plugins such as MailPoet now offer you the choice).
You can use a tool like www.e-recht24.de/google-fonts-scannerplugins as described in the next chapter or manually in the developer tools of your browser with just a few clicks.
To do this, you should open your website in incognito or private mode. As soon as the page is open, you can access the developer tools by right-clicking and selecting "Browse" or, even easier, by pressing the F12 key.
There you will find a "Network" tab and below it the "Font" selection. All fonts that are displayed on the website you have accessed will be displayed there. Please note: In order for the fonts to be displayed, you must open the page again. Reload (F5 key).
You will then see a list of all the fonts used. Your own domain should appear in the "Domain" column. If it says something else, you need to check again where else this font is used and use the local font there too.
Host Google Fonts locally with plugins
For various reasons (performance, security, ...), I personally try to solve all requirements without a plugin for the time being. I therefore recommend the manual method I described above.
If you don't feel confident or comfortable with this, you can of course implement it with a plugin. This is a particularly attractive option for "non-specialists" who may not work with WordPress every day.
That's why I'm giving you 3 plugin tips on the topic of Google Fonts and the GDPR.
Borlabs Fonts Blocker
To permanently turn off Google Fonts that are not loaded locally, you can use the Font Blocker from Borlabs use.
As soon as you have installed and activated it, the plugin cuts all connections to Google regarding their fonts. Delete activate after as a precaution the Cache your website.
You can download the plugin here: Borlabs Fonts Blocker.
OMGF - GDPR/DSVGO Compliant, Faster Google Fonts. Easy.
Probably one of the best-known plugins for integrating Google Fonts locally. OMGF scans your site for Google Fonts and saves them on your server.
You can download the plugin here: OMGF.
GDPRress - Eliminate external requests to increase GDPR compliance
The GDPress plugin is still relatively new and unknown, but from a well-known developer in the WordPress world. GDPress scans your website for scripts and stylesheets from third-party providers.
You can then save these locally on your server so that no requests from and to external providers take place.
You can download the plugin here: GDPRS.
What to do if Google Fonts are still being used?
If you are still using Google Fonts on your website, they are most likely coming via a Plugin or integrated elements.
Known Plugins These are mainly Google ReCAPTCHA, newsletter tools such as ActiveCampaign, MailPoet or Typeform. These providers are increasingly offering the Use of local fonts. There are individual procedures for this, which the provider has usually documented. In the worst case, as with Google reCAPTCHA, it is not possible. There is only one solution here: Switch to GDPR-compliant alternatives. For Google reCAPTCHA I recommend WP Amour or Honeypot.
But also via so-called iFrames Google Fonts may be used on your website. For example, if you have integrated YouTube videos or Google Maps. Here there is only the solution of the Content Blockers. This means that the iFrame is not loaded until After consent of the visitor. Unfortunately, I often see errors in the implementation here. "My" cookie consent tool Borlabs Cookie comes with such a blocker and works reliably.
Still haven't found a 100% solution?
Of course, I hope that this guide has helped you to make your website GDPR-compliant with regard to Google Fonts.
If this is not the case, or if you simply can't or don't want to spend the time, take a look at my GDPR Check on or get in touch with me.
Conclusion
- The use of Google Fonts that are not stored locally violates the GDPR & the TTDSG.
- Simple solution: Use local Google Fonts.
- The well-known "file type not permitted" problem can be avoided by using a one-line code. Important: Remove it again afterwards!
- Then check that you are really only using local fonts (including plugins!).
- There are now very good plugins for the GDPR-compliant use of Google Fonts.
- Attention with certain plugins and iFrames.
EN 
DE
Very accessible and easy to follow.
Thank you very much, exactly what I was looking for.
Thank you very much for your feedback. I'm glad that my contribution has helped you!
I found your detailed explanation of the steps to save the Google Fonts locally and integrate them via your own server hosting particularly helpful. The use of the XYZ plugin and the integration of the corresponding code were explained particularly clearly.
It's great to see that there are solutions to improve website load time while meeting privacy requirements. Your post has helped me develop a better understanding of how to optimize my website with Divi and locally hosted Google Fonts.
Many thanks for these valuable tips and instructions!
Hello,
The instructions have worked very well for me for the second time.
The second time, however, I noticed that the 4th step seems to be superfluous.
This may depend on the font used or whether certain modifications (e.g. different font weights) have been used.
Do you have more information on this?
Hi Samuel,
I'm glad you found the instructions helpful.
You guessed right with your question, it depends on the font. Which one was it where you didn't need it?
I would always insert it as a precaution.
Thanks for your instructions. it worked straight away!
Hi Doris,
I'm delighted!
Thank you also for taking the time to leave your positive comment.
Hello Christian,
Thanks for your answer. The idea with the Divi Cache was exactly right 🙂
With the http call, I meant that the Chrome developer tools had indicated to me that the fonts would be loaded via an http instead of an https connection. I put this down (as a layman) to the fact that I loaded the fonts onto the server via web FTP.
Thanks again for your article!
LG,
Carsten
Hi,
I was able to integrate the Google fonts locally with the instructions, but the fonts are called via an http instead of an https request. I then thought about using a plugin and undid the individual steps (deleted the fonts on the server, removed the entry in style.css, switched back to the default font in the customizer. But somehow it doesn't work, the fonts are still loaded locally. I have deactivated the cache plugin. What could be going on?
Hi Carsten,
What exactly do you mean by "calling the fonts via http" if you have integrated the fonts locally?
Regarding your question: You are probably already on the right track with cache. Also delete the "Divi Cache" -> folder "et-cache" in wp-content and check it again.
Otherwise, let me know the URL and I'll take a look from the outside.
Best regards
Christian