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.
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.
To understand why using fonts can pose data security risks, let's first look at how they are implemented on a website.
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.
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.
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.
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.
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.
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
Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf unsere Website zu analysieren. Außerdem geben wir Informationen zu Ihrer Verwendung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Unsere Partner führen diese Informationen möglicherweise mit weiteren Daten zusammen, die Sie ihnen bereitgestellt haben oder die sie im Rahmen Ihrer Nutzung der Dienste gesammelt haben. Mit einem Klick auf die Schaltfläche „Alle Cookies zulassen“ erklären Sie sich damit einverstanden. Die Einwilligung kann jederzeit mit Wirkung für die Zukunft widerrufen oder geändert werden. In unserer Datenschutzerklärung informieren wir ausführlich über die Art und den Umfang der Datenverarbeitung.