In this article, we would like to give you all the important facts about Google Fonts and the GDPR and explain what needs to be considered. This concerns both the ruling of the Munich Regional Court, possibilities for checking whether Google Fonts are integrated on your own website, to simple 1-click solutions to quickly solve the problem of external Google Fonts in WordPress.
Table of contents
Google Fonts - what is it?
Google Fonts Logo
If the topic of Google Fonts is new territory for you, here is a brief introduction to the problem and what Google Fonts are:
Google Fonts is a collection of fonts provided free of charge by Google. This collection is very popular and widely used around the world. As a rule, the fonts are not only made available via Google, but are also integrated into websites and software via Google servers. Although it is also possible to download the Google Fonts and embed them locally (directly and without Google servers), this is often not done.
However, the use of Google Fonts via Google servers also has good reasons. For one thing, the privacy problem with Google Fonts is a very German or European problem. In many other countries, you would get smirking looks if you had to explain that Google Fonts have a privacy problem.
Furthermore, the integration directly via Google is much faster and is often solved in many software components via the API there, technically it is therefore not so easy to integrate dynamic Google Fonts, which for example can be changed by a user in a page builder in WordPress at any time, locally. The size of all font files alone would be gigantic. There are a few more advantages for Google Fonts via Google Server, which we will not go into here, since the topic has been settled for us anyway, thanks to the German Data Protection Act (DSGVO).
The core of the problem
When Google Fonts are called up via the Google servers, the dynamic IP address of the user is transmitted to Google. However, according to the GDPR, such a transmission must be actively agreed to by the user before it takes place.
Whom does the problem concern:
Due to the widespread use of Google Fonts, almost every user or website owner who has the option to select different fonts in their theme / WordPress website is affected.
As a rule, this function usually hides the Google Fonts API, which is then used to integrate Google Fonts via corresponding Google servers.
Users of corresponding plugins are also affected, whereby the name already clearly indicates this, e.g. plugins such as Easy Google Fonts or WP Google Fonts are meant.
We'll explain a little further down in the article how to identify Google Fonts in your website.
The Munich Regional Court's ruling on Google Fonts
Munich - city center
However, in its ruling of January 19, 2022, the Munich Regional Court decided thatthat the disclosure of 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 in this case. The website visitor was awarded €100 plus interest as damages. Furthermore, the website operator was ordered to cease and desist. In the event of a repeat offence, a fine of up to €250,000 may be imposed.
Since a decision by the Munich Regional Court, more and more warnings are being sent to website operators who embed fonts from Google servers. This is because embedding external web content such as Google Fonts from US web services is illegal without the visitors' consent, as described above.
Further information on the current warning letters can be found here, among other places:
- Warning letters to website operators with Google fonts (Golem.de)
- Wave of warnings due to Google web fonts - How to react correctly; with sample letter (WILDE BEUGER SOLMECKE)
How do I know if my website uses Google Fonts?
The simplest solution for laymen is a test via the Google Fonts Checker from Sicher3. There you can simply enter the URL of your website and have the page checked. However, you should keep in mind that checking the home page does not mean that all sub-pages are free of Google Fonts. If you want to be sure, you basically have to check every single subpage of your website, usually the home page and important subpages are already a good indication whether there are Google Fonts on Google servers or not.
What you cannot determine via the tool is the source of the Google Fonts, because it can be different.
Check Google Fonts via Developer Tools
For savvy users, there are significantly more ways to detect Google Fonts and also their source via the browser's developer console. The following screenshot and information are from Google Chrome, but the steps can be adapted in a similar way in most browsers.
This way you can access developer tools:
These are three possible ways to open the developer tools, so you need to select only one step and not perform all steps:
- Right-click on a page and select "Examine Element".
- Select View > Developer > Developer tools off.
- Use the key combination "Alt + Command + I".
In the developer tools now click on the tab "Network"You may need to reload the page once to see results here. Then use the search in the network tab to determine if Google Fonts are included via Google servers.
Search for the following URL's "fonts.googleapis.com" or "fonts.gstatic.com" should either of these URL's show up in the network log, your website is using Google Fonts.
If you find results on your website, you can also use the developer tools to find out where these Google Fonts come from. To do this, simply click on an entry in the list and select the "Initiator" tab in the file menu that then opens.
There you can see, for example, whether the Google Fonts are integrated directly via the website or via other services such as YouTube or Google ReCaptcha.
This is an example of a YouTube video with Google Fonts in the developer console:
In that case, the YouTube video would have to be removed or blocked behind a content blocker.
If only your URL / domain appears in the initiator chain, then the Google Font is loaded by WordPress via your theme or a plugin.
Solutions for local and DSGVO-compliant integration of Google Fonts
If the origin of these is e.g. YouTube, Google Maps or other tools, the avoidance is more difficult, because you have no direct influence on these external tools and services. Our plugin offers a solution even for this more complex constellation by means of a simple content blocker.
We now want to deal here with the most common form of Google Font Integration. Because mostly the fonts come directly from the WordPress themes or a plugin and are thus directly integrated via the own website. In the following video you will learn how Google Fonts can be recognized and integrated locally with our plugin. This concerns both the variant from a YouTube video or Google Maps, as well as the fonts from themes and plugins.
Tip: Do you use the Divi Theme from Elegentthemes? Then have a look at our article "Divi DSGVO & Embed Google Fonts locally | in 10 seconds" an.
For this area, there are two basic ways to integrate Google Fonts locally. An automated and a manual variant:
Embed Google Fonts locally in WordPress automatically
Our plugin "Automatic Google Fonts Embedder for WordPress"This solution solves the problem with the Google Font Integration, which is not integrated locally in most WordPress themes and plugins, but via the Google CDN (Google Server), automatically within a few seconds and without any complex work. The non-local integration (i.e. via the Google CDN) of the Google Fonts is not in compliance with the GDPR. The "Automatic Google Fonts Embedder"Plugin automatically detects the Google Fonts embedded in WordPress, downloads them in the background as well automatically and embeds the Google Fonts locally.
No complex configuration or major manual action is required. The plugin works with the "WP_Dependencies" system and scans the styles registered there for Google Fonts and ensures the appropriate local integration and exchange of the CSS files.
The WP_Dependencies are the official and correct way to include CSS files and therefore Google Fonts in WordPress. Due to the standardization of this interface, our plugin works with almost all themes, plugins and page builders, which usually also use this interface for fonts and style files.
Furthermore, the latest version of the plugin also recognizes Google Fonts that are reloaded via JavaScript or written hard into the HTML code or Customizer. Thus, the plugin covers the widest range of sources for Google Fonts and can reliably detect them, download them automatically and embed them locally.
In contrast to a manual integration, the big advantage here is that our plugin automatically downloads the new fonts if they are ever changed or if individual subpages use different fonts than the home page. These changes are quickly overlooked and forgotten with a manual integration.
Especially for agencies or web designers this aspect is important, because they can't always control if a customer / user doesn't change the font once in his page builder.
Screenshot from Automatic Google Fonts Embedder Plugin
Manually embed Google Fonts
Please perform these steps only if you have basic knowledge in this area, you may otherwise trigger defects on your website.
If your WordPress website already has a child theme, then add the CSS codes mentioned below as well as font files in your child theme, then you don't need a separate plugin.
Note fonts and cuts
The first thing you need to do is make a note of all the Google Fonts and font styles you use, so you know which fonts you need to download in the first place.
Remove Google Fonts
To remove the Google Fonts from WordPress, you need to remove them using wp_dequeue_style() remove before execution.
The ID you need for the dequeue function can be found in the source code of the respective CSS files.
For example, in the source code of a WPBakery website you can find something like this:
<link rel='stylesheet' id='vc_google_fonts_source_code_pro200300regular500600700900-css' href='https://fonts.googleapis.com/css?family=Source+Code+Pro200300regular500600700900' type='text/css' media='all' />
The ID you need for wp_dequeue_style is "vc_google_fonts_source_code_pro200300regular500600700900", without the "-css" Suffix.
For an example of how to use the wp_dequeue_style function, see the code sample below. You need to run this for each CSS file that loads Google Fonts.
Create the plugin (skip if child theme exists)
Open the folder /wp-content/plugins/ with an FTP program. In it you now create a new folder with the name "google-fonts". In the newly created folder you now create another folder, this one gets the name "fonts".
In addition, two files are created, one "google-fonts.php" as well as "fonts.css".
The structure should then look like this:
- /google-fonts
- /fonts/
- /fonts.css
- /google-fonts.php
Open the file "google-fonts.php" and paste the following code there:
Afterwards you can install the plugin in your WordPress system under "Plugins > Installed Plugins" enable. Look for the entry "Local Google Fonts by Bajorat Media".
Download Google Fonts
Use the Google Web Fonts Helper to load the necessary font files and generate the CSS. You will now need the list you created at the beginning.
Find each used font individually from the list, click the required "Charsets", select the desired and used Cuts (Styles) off.
Now look below the CSS representation for the input field for the folder name, this is labeled with "Customize folder prefix (optional):". Here you now enter "fonts/", matching the structure of the small plugin.
When that is done, copy the code at "3. copy CSS" and insert this into the fonts.css of the plugin. Then download the actual font files. The download button is located below the CSS field.
The font files must now be unzipped and copied to the folder "/fonts/" of the plugin can be uploaded.
You will need to repeat these steps for each Google Font you are currently using or plan to use in WordPress. If you change a font in your page builder at any other time, you will also have to go through this step again manually and adjust the fonts.
If these manual steps are too much work for you and especially too inflexible, feel free to test our plugin "Automatic Google Fonts Embedder" or for the Divi theme "Divi DSGVO & Google Fonts", this performs all these steps automatically and monitors the Divi website for changed fonts and downloads them automatically.
Need help with Google Fonts?
If you still need support when it comes to integrating Google Fonts locally and DSGVO compliant, feel free to contact us. We are happy to help you with the conversion and customization of your WordPress website.
Just get in touch with us. If you would like to learn more about us, you will find information on our Agency profile found.