How to embed Google Fonts locally: DSGVO compliant with WordPress 

If you run one or more websites and your theme or plugin uses Google Fonts, usually fonts are reloaded directly from the Google server. Besides the wider choice of fonts, this approach saves time and effort.

In recent weeks, a noticeable number of website operators who use Google Fonts have received a warning letter for violating the GDPR. This warning is usually accompanied by a claim for damages and a cease-and-desist declaration. Frequently, the warnings also come from private individuals who systematically browse websites. The website operators are accused of having integrated Google Fonts externally via Google servers without the user's consent. The transmission of user data without prior consent is a violation of the GDPR if the user has not explicitly agreed. And this is exactly what happens with the dynamic integration of Google Fonts.

Google Fonts and privacy 

When Google Fonts are reloaded, the user's IP address is automatically sent to the Google server, which is not data protection compliant. IP addresses are personal data and may not be processed without consent, otherwise there is a violation of the GDPR.

The Munich Regional Court has already ruled in its judgment of January 20, 2022 (File reference: 3 O 17493/20) that the external integration of Google Fonts does not comply with the GDPR. The consequences can be a costly injunction and claims for damages. The BGH ruling of May 16, 2017(case number: VI ZR 135/13) also makes it clear that personal data may not be collected and processed without the user's consent. Some lawyers and private individuals are currently sending out warning letters with claims for damages because Google Fonts are not loaded in a data protection-compliant manner. The current wave of warning letters could result in further judgments.

To avoid legal disputes and the associated hassle, you should integrate Google Fonts locally andthus DSGVO-compliant. The fact that even WordPress.org recommends loading Google Fonts locally makes it clear once again how serious and important this topic is. It remains to be seen how further rulings will turn out because of the dynamic integration of Google Fonts. In any case, it makes sense to deal with the issue of Google Fonts in good time and to integrate the fonts locally on your website.

How to determine if you have correctly embedded Google Fonts 

Before you embed Google Fonts locally, you need to know which fonts you use and want to replace. If you have a plugin to embed Google Fonts, you can find the fonts in the plugin's settings. If you use a theme that uses Google Fonts, you can find the fonts in your theme settings or via the Customizer (Design - Customizer - Fonts). You can usually find the fonts under the following terms: Fonts, Fonts, Typography. Alternatively, you can find out which fonts you are using on your website via your browser in the developer console. To do this, open your Internet browser and press CTRL+SHIFT+j for Windows and Cmd + Option + J for Mac.

In Chrome, click on the "Sources" tab. You can now see the data that is loaded to your website in the left column. There you will also find the information whether Google Fonts are loaded externally via Google(fonts.googleapis.com and fonts.gstatic.com).

In Firefox you will find the tab "Network Analysis". Click on it and enter "fonts" in the input field. You will see the fonts that are loaded externally via Google. In the right column under the item "headers"you can also see which font is used.

Once you have located the fonts, you should first deactivate them and delete them in the second step. There are several ways to upload the fonts to your own server and mount them locally.

How to properly embed Google Fonts in WordPress

After you have found out which Google Fonts you need, you can download them and embed them locally. If you want to embed multiple fonts, you need to repeat the following steps for all the fonts you want.

Step 1: Download Google Fonts

To download the fonts, go to https://google-webfonts-helper.herokuapp.com/fonts and search for the fonts you want. In the search field, enter the desired font and then select the corresponding character sets and font styles. You will find the data in your developer console.

Step 2: Locate CSS code

After selecting the desired font and the corresponding configuration, a CSS code is generated for your fonts. You can copy this code under point 3. Since you need the CSS code at the end, it is best to paste it into a word processor. You can also use the plugin Self-Hosted Google Fonts(https://wordpress.org/plugins/selfhost-google-fonts/) for the CSS code. 

The directory "/fonts " is set as the default directory under " Customize folder prefix (optional) ". If you want to store the fonts in a different path, you should change the directory at this point. This will save you time later on.

Step 3: Download files

Under point 4 you can download your files. You will now find your Google Fonts as a ZIP file on your computer. If you want to use multiple Google Fonts on your website, repeat the steps for each of your selected fonts.

Step 4: Upload Google Fonts files

After downloading your file, you need to upload it. You will find a file with the selected Google Fonts in different formats (EOT, WOFF, WOFF2, TTF, SVG) on your computer. You need to upload this file to your server. In step 3 you have chosen a directory for your Google Fonts, create this directory in your webspace and copy the fonts into it.

Step 5: Customize CSS of the website

You have placed the Google Fonts in your own web space. Now you only have to make the necessary CSS adjustments. Under point 2 you were shown the CSS code. If you have copied it, you can now include it in the style.css file and overwrite the old .css file with the new code.

Step 6: Check Google Fonts integration

In the last step, check that the Google Fonts have been included locally and that there is no longer a connection to the Google server. In your developer console, you can check under the "Sources" tab to see if your Google Fonts are loaded from your server. By clearing your cache, you ensure that your website is using the latest CSS code and thus the Google Fonts you have embedded locally.

Conclusion on the local integration of Google Fonts

If you follow the steps above, Google Fonts can be loaded locally on your server and you will be compliant with the GDPR. Since Google Fonts are not automatically updated when they are loaded locally, you can install a plugin for this purpose. Even if your server load is higher with the local integration of Google Fonts, this approach is currently the better solution. When it comes to loading times, opinions differ.

Here's what to do if you've received a warning about Google Fonts

If you've received a warning letter for externally incorporating Google Fonts, it's important to keep your cool and not be intimidated.

It is important to respond to the warning and to observe the deadlines specified therein. Ignoring the warning can lead to further unnecessary costs and time. In the first step, you should get an overview of the key data of the warning:

• Check whether there is a data protection violation on your website and whether you have actually integrated the fonts from Google Fonts externally at the time of the warning. You can tell this from the source code sent to you with the warning(googleapis.com or fonts.gstatic.com). If you have integrated Google Fonts externally, change this immediately. You can find the instructions for this in the text above.
• Disagree with the demand for payment and do not sign the enclosed cease-and-desist letter under any circumstances. If you have already integrated Google Fonts locally, you can point out to the author of the warning letter that the integration of Google Fonts on your website does not take place externally and that no connection to the Google servers is established when visiting your website.
• You can request the original power of attorney to ensure that the warning letter was written correctly and was not created as part of the warning wave.
• If you are not sure whether the warning is justified, seek legal advice.

We are happy to support you with the local integration of Google Fonts, your fonts in general and a DSGVO check of your website. Even if you have already received a warning, we are there for you.