Google Fonts violate the GDPR

Loading Google Fonts via URL is a violation of GDPR rules. A ruling of court in Munich sets a precedent. On January 20, a Munich district court ruled that a plaintiff was entitled to an injunctive relief and €100 in damages against a website operator for providing the visitor's IP address to Google through the use of Google Fonts.

The reason for this judgment is that you have the opportunity to use the fonts without being connected to Google. Passing on the IP address to Google is therefore not necessary for the functionality of the website and is therefore a violation of the GDPR:

The defendant violated the plaintiff's right to informational self-determination by forwarding the dynamic IP address to Google when the plaintiff accessed the defendant's website. The automatic transmission of the IP address by the defendant to Google was an inadmissible encroachment on the plaintiff's general personality rights under data protection law, since the plaintiff in this encroachment was undisputedly not in accordance with Section 13 (2) TMG old version, Art. 6 (1) a ) GDPR has consented.

What does this mean for website operators in the EU?

The 100 euros are the penalty in the current court case. However, the German court is threatening a fine of 250,000 euros for each case of infringement, or alternatively a six-month prison sentence if the website owner does not comply and continues to make IP addresses available to Google through the use of Google Fonts. From a legal point of view, this means that it is better to load fonts locally and disable the Google Fonts script. This is usually not that difficult, there are plugins that can do that.

How to use Google Fonts locally in wordpress

1. Plugin

The OMGF plugin offers an easy way to load Google Fonts locally. It uses the Google Fonts Helper API to automatically cache the fonts used by the theme and plugins to minimize DNS requests and speed up your WordPress website which should your instance make f 100% GDPR compliant.

2. Elementor

The Elementor automatically loads Google Fonts. To load the fonts locally, you have to do two steps:

1. Stop the Google Fonts script
2. Download the font from Google and upload it to Elementor as a custom font

You can stop the execuction if Elementor Google Fonts script with this pice of code that you add to functions.php (make sure to use a child theme for this):

// Stop loading Google Fonts
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Note that the fonts are still loaded in the Elementor editor, but not in the frontend. After such a change, check how your website looks in the frontend.

So, if you use Google fonts in your designs, you have to save them locally as well. You can use Elementor’s “Custom Fonts” tool for this. It works like this:

1. Download your font from Google. You'll get a ttf document in a zip folder
2. For a font on the web you need different formats. You generate this by converting your ttf file in a font converter.
3. After converting, you should have the font in different document formats (preferably TTF, EOT, WOFF, WOFF2 and SVG)
4. Go to Dashboard Elementor Custom Fonts and click “Add New"
5. Fill in all fields, upload your font files and save
6. That's it. From now on, your font should be available in Elementor

3. Child Theme

You can also create a child theme of your theme or modify your existing child theme:

1. Add a “fonts” folder to your theme. Path: wp-content/themes/fonts
2. Download your font from Google. You will receive a ttf document in a zip folder.
3. For a font on the web you need different formats. You generate this by converting your ttf file in a font converter.
4. After converting, you should have the font in different document formats (preferably TTF, EOT, WOFF, WOFF2 and SVG)
5. Modiy your CSS of your theme (style.css) and add something like this:
   

   @fontface {
   font-family: fontname;
   src: url("/fonts/fontname.woff2") format("woff2"),
   url("/fonts/fontname.woff") format("woff"),
   url("/fonts/fontname.woff") format("ttf"),
   url("/fonts/fontname.woff") format("svg"),
   url("/fonts/fontname.woff") format("eot");
   font-weight: normal;
   font-style: normal:
   }

6. Check that the font name and font path match your font
7. Repeat this step for all font weights (bold, narrow) and all font styles (italic etc.)

Conclusion

Making a webpage GDPR compliant can be a tedious process and you need to think about many details. Our experts are happy to support you: just get in touch with us.

Source: publishingblog.ch