How to embed Google Fonts locally: GDPR-compliant with WordPress

If you run one or more websites and your theme or plugin uses Google Fonts, fonts are usually loaded directly from Google’s servers. As well as offering a wider selection of fonts, this approach saves time and effort.

In recent weeks, a striking number of website operators using Google Fonts have received a warning letter for breaching the GDPR. This warning letter is usually accompanied by a claim for damages and a cease-and-desist declaration. The warning letters are often sent by private individuals who systematically scan websites. Website operators are accused of embedding Google Fonts externally via Google’s servers without the user’s consent. The transfer of user data without prior consent constitutes a breach of the GDPR if the user has not explicitly given their consent. And this is precisely what happens when Google Fonts are dynamically embedded.

Google Fonts and data protection

When Google Fonts are loaded, the user’s IP address is automatically transmitted to the Google server, which is not in compliance with data protection regulations. IP addresses constitute personal data and must not be processed without consent; otherwise, this constitutes a breach of the GDPR.

The Munich Regional Court has already ruled, in its judgement of 20 January 2022 (case number: 3 O 17493/20), that the external integration of Google Fonts does not comply with the GDPR. The consequences may include costly injunctions and claims for damages. The Federal Court of Justice (BGH) judgement of 16 May 2017 (Case No.: 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 demanding compensation because Google Fonts are not being loaded in a manner compliant with data protection regulations. The current wave of warning letters could lead to further court rulings.

To avoid legal disputes and the associated hassle, you should embed Google Fonts locally, thereby ensuring compliance with the GDPR. The fact that even WordPress.org recommends loading Google Fonts locally further highlights just how serious and important this issue is. It remains to be seen how further court rulings regarding the dynamic embedding of Google Fonts will turn out. In any case, it makes sense to address the issue of Google Fonts in good time and to embed the fonts locally on your website.

How to check whether you’ve integrated Google Fonts correctly

Before you integrate Google Fonts locally, you need to know which fonts you are using and wish to replace. If you have a plugin for integrating Google Fonts, you can find the fonts in the plugin’s settings. If you’re using a theme that utilises Google Fonts, you can locate the integrated fonts in your theme settings or via the Customiser (Design – Customiser – Fonts). You’ll usually find the fonts under the following headings: Fonts, typefaces, typography. Alternatively, you can use your browser’s developer console to find out which fonts you’re using on your website. To do this, open your web browser and press CTRL+SHIFT+J on Windows or Cmd + Option + J on a Mac.

In Chrome, click on the ‘Sources’ tab. You can now see the data being loaded onto your website in the left-hand column. There you will also find information on whether Google Fonts are being loaded externally via Google (fonts.googleapis.com and fonts.gstatic.com).

In Firefox, you’ll find the ‘Network’ tab. Click on it and type ‘fonts’ into the search box. You’ll be shown the fonts that are loaded externally via Google. In the right-hand column, under ‘Headers’, you’ll also see which font is being used.

Once you have identified the fonts, you should first deactivate them and then delete them. There are various ways to upload the fonts to your own server and link to them locally.

How to embed Google Fonts correctly in WordPress

Once you have identified which Google Fonts you need, you can download them and embed them locally. If you wish to embed several fonts, you will need to repeat the following steps for each of the fonts you want to use.

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. Enter the name of the font you want in the search box, then select the relevant character sets and font weights. You’ll find the relevant data in your developer console.

Step 2: Locate the CSS code

Once you have selected the desired font and its configuration, a CSS code for your fonts will be generated. You can copy this in step 3. As you will need the CSS code later on, it is best to paste it into a word processor. You can also use the Self-Hosted Google Fonts plugin (https://wordpress.org/plugins/selfhost-google-fonts/) for the CSS code.

The ‘/fonts’ directory is set as the default directory under the ‘Customise folder prefix (optional)’ option. If you wish to store the fonts in a different path, you should adjust the directory here. This will save you time later on.

Step 3: Download files

Under point 4, you can then download your files. Your Google Fonts will now be available as a ZIP file on your computer. If you want to use several Google Fonts on your website, simply repeat the steps for each of the fonts you have selected.

Step 4: Upload Google Fonts files

Once you have downloaded your file, you will need to upload it. On your computer, you will find a file containing the selected Google Fonts in various formats (EOT, WOFF, WOFF2, TTF, SVG). You will need to upload this file to your server. In step 3, you selected a directory for your Google Fonts; create this directory in your web space and copy the fonts into it.

Step 5: Customise the website’s CSS

You have uploaded the Google Fonts to your own web space. Now all you need to do is make the necessary CSS adjustments. The CSS code was displayed in step 2. Once you’ve 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 that Google Fonts have been integrated

As a final step, check whether the Google Fonts have been embedded locally and are no longer connected to the Google server. In your developer console, under the ‘Sources’ tab, you can check whether your Google Fonts are being loaded from your server. Clearing your cache ensures that your website uses the latest CSS code and, consequently, the Google Fonts you have embedded locally.

Conclusion on the local integration of Google Fonts

If you follow the steps outlined above, you can load Google Fonts locally via your server, thereby ensuring compliance with the GDPR. As no automatic updates are carried out when Google Fonts are integrated locally, you can install a plugin for this purpose. Even though your server load is higher when integrating Google Fonts locally, this approach is currently the better solution. Opinions are divided when it comes to loading times.

Here’s what to do if you’ve received a warning letter regarding Google Fonts

If you have received a warning letter regarding the external embedding of Google Fonts, it is important that you keep a cool head and do not let yourself be intimidated.

It is important to respond to the warning letter and to take note of the deadlines set out therein. If you ignore the warning letter, this may lead to further unnecessary costs and a waste of time. As a first step, you should familiarise yourself with the key details of the warning letter:

• Check whether your website is in breach of data protection legislation and whether you were, in fact, embedding Google Fonts externally at the time the warning letter was issued. You can tell by checking the source code sent to you with the warning letter (googleapis.com or fonts.gstatic.com). If you have embedded Google Fonts externally, rectify this immediately. You will find instructions on how to do this further up in the text.
• Dispute the demand for payment and under no circumstances sign the attached cease-and-desist declaration. 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 is not external and that no connection to Google’s servers is established when your website is visited.
• You can request the original power of attorney from the solicitor to ensure that the warning letter has been drawn up correctly and was not issued as part of a mass campaign of warning letters.
• If you are unsure whether the warning letter is justified, seek legal advice.

We’d be happy to help you with the local integration of Google Fonts, your fonts in general, and a GDPR check of your website. Even if you’ve already received a warning letter, we’re here to help.