Google Fonts GDPR compliance - What website operators have to consider
Disclaimer: This article contains screenshots from the tool webpagetest.org.
We conducted the tests with the following settings:
Server location Germany
Speed Fast 3G
Device: Motorola G4
We chose this configuration because Google's Page Speed Insights uses a similar configuration.
February 2022. Munich Regional Court. A website operator is threatened with a fine of up to 250,000 euros or imprisonment of up to six months. Reason: The data security violation through the font integration on their website.
(Link to the source in German.)
Even if the final amount and scope of the penalty may not have been as severe as initially described, several penalties are currently landing on the desks of website owners.
What do website operators have to consider with regard to data security and fonts? This is what the present article aims to clarify.
What are fonts?
Fonts are the typefaces that we can see and use on websites. A font indicates what a letter looks like. Some very known font examples are Times New Roman or Arial.
Why do we need GDPR compliant fonts?
To understand why using fonts can pose data security risks, let's first look at how they are implemented on a website.
How the font gets on the website
Font selection
According to the font finder website whatfontis.com, there exist currently (as of August 2022) 833,754 web fonts. A wide range of choice for businesses to find the right graphic font expression for their website.
Font Decision
Designers, front-end developers, marketers or company management sit down to decide about the font. They consider which font, or fonts, best fit the look and feel of the company. Once the decision is made (not too italic, not too bold, not too ornate, but nice and young to match the corporate identity...), it's a matter of where - from which provider - to get the font from.
Font provider
Fonts, or the so-called web fonts that are used in the web, have the advantage that no user needs to have them installed on their computer in order to see them. To make it easy to integrate them into websites and display them via the user's browser, font portals are used as providers. The fonts are stored there and are available to everyone. The best-known font portals with huge libraries of fonts are Google Fonts or Adobe Fonts.
Font integration
Let's suppose a website operator would like to have the font Baloo 2 Regular 400.
The company now has the technical options of integrating the font in the following ways:
1. website operators can download the desired font from the font portal, such as Google, and upload it again to their own server. Here, the font is then integrated into the website from their own server. If users visit such a website, no connection is established to Google servers in order to load the font, as the font of the website is available on the website's own server. In terms of data protection and privacy law, this form of integration is therefore not dangerous, as long as the website's own server infrastructure complies with the GDPR guidelines. This means that the Google Fonts used this way are also GDPR compliant.
Fonts loaded locally, i.e. from your own server, can look as follows in the webpagetest.org waterfall diagram:
2. it is also possible to include a CSS code snippet in the HEAD of the HTML code of the web pages, either via @import or <link>.
The Google Fonts website itself describes how this is best done. In this procedure, first a connection to the Google server is established to call the CSS of the font and then another connection to gstatic.com is made to download and finally display the actual font. This type of integration is very easy to implement, but not recommended, as GDPR compliance and Google Fonts are not in harmony here.
Integrating Google Fonts in a GDPR compliant manner: what do I need to bear in mind?
If fonts are integrated directly via a font portal such as Google Fonts, then a connection to the Google servers is established when the website is called up, as can be seen in the following screenshot from the section "Connection setup" of webpagetest.org, for the fonts.googleapis.com and the fonts.gstatic.com:
What is problematic about this implementation is that at least the IP address of the user is transmitted to Google. If this transfer is not explicitly made clear in the cookie consent banner of a website and the user has not explicitly given his or her consent to it, website operators will therefore get a GDPR Google Fonts warning (source in German), as described at the beginning of the article.
The right way to web-safe fonts
It is therefore best to always load web-safe fonts locally, directly from your own website. At this point, we would like to point out that Adobe fonts also violate the DSGVO. Unlike Google Fonts, however, it is not permitted to host the fonts locally with Adobe, as this violates the Adobe license conditions. Thus, with Adobe you are bound by greater limitations.
Image credits:
Teaser Picture: Photo from Fernando Arcos: https://www.pexels.com/de-de/foto/weisser-warnkegel-auf-der-tastatur-211151/
Screenshot 1: The Boutique Agency, Screenshot from the tool webpagetest.org on 12.08.2022
Screenshot 2: The Boutique Agency, Screenshot from the tool webpagetest.org on 12.08.2022
