Google Chicken and Egg

In the digital age, web design is as much about aesthetics as it is functionality. One key component of crafting visually appealing websites is choosing the right fonts. Google Fonts, a popular resource for web designers and developers, offers a vast collection of free, customisable fonts.

However, the use of Google Fonts has raised concerns about data privacy, particularly in light of the General Data Protection Regulation (GDPR) in the European Union.

It is worth noting that this point, that a acording to builtwith, 1.9 million UK websites use Google Fonts. Meaning this could be a much larger issue than we think.

So, why have we embarked on this mini adventure in the crazy world of GDPR and Google Fonts? It started with a simple addition of Google Analytics and a quick GDPR cookie analysis, against our Punk Security website.

After implementing Google Analytics we quickly discovered that we needed to alert users about the use of tracking cookies and analytics. Fair enough, but we then had a change in heart after discovering the hoops you have to jump through and that Google store all analytic data in the US.

We removed the analytics deployment (after about 30 minutes), but still found we had Google cookies. After some investigation we discovered our Punk Security EXO 2 font as the cause, because it was downloading the font directly from Google.

I thought I’d share my findings and thoughts in this blog post. We’ll explore the Google Fonts GDPR issue and how web designers can strike a balance between style and data privacy.

GDPR and Data Privacy Concerns

GDPR came into effect in 2018, aimed at safeguarding the personal data of European Union residents. It places strict requirements on how organisations handle and process user data. One of the core principles of GDPR is the requirement for explicit user consent for data collection, processing, and removal.

This is where the Google Fonts GDPR issue comes into play.

When a website uses Google Fonts, it involves the client connecting to Google’s servers to fetch the font files. This connection could potentially collect user data, such as IP addresses, which falls under the purview of GDPR.

The concern arises from the fact that this data may be collected without the user’s explicit consent, which could lead to compliance issues for website owners.

Here we start the Google chicken and egg situation.

You must obtain permission from the user to collect this information before connecting, but then how do you render a site to ask for permission to render your site fonts.

Now I can hear the people in the back of the room shouting, “no one would ever care about that” … but you are unfortunately wrong, please check out this article from “The Register” Website fined by German court for leaking visitor’s IP address via Google Fonts. The fine was small, but has set a legal GDPR precedent.

Understanding Google Fonts

Google Fonts, a web service offered by Google, permits web developers to effortlessly integrate fonts into their web pages.

This particular service enjoys popularity due to its extensive selection of fonts, which can elevate a website’s visual aesthetics, enhance legibility, and bolster a cohesive brand identity.

Work around

So we now understand that we need users consent before connecting to third party services such as Google Fonts. The question is how can we do this and still remain GDPR compliant?

We investigated a few solutions and found the two following options;

Method 1: Host Google Font Locally.

This method requires you to download and host the font locally to your site. The first step requires you to download the font files and then upload them to your web server. You can then employ the ‘@font-face’ declaration within your CSS to make a reference to font files and apply them to your website.

⚠ You need to check the font licensing before proceeding, and make sure you are allowed to do this.

Please find the example below:

@font-face {
    font-family:'MyFont';
    src:url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}

body {
    font-family:'MyFont',sans-serif;
}

We specify the source of the font files as ‘myfont.woff2’ and ‘ myfont.woff’. These font files will need to be uploaded to your web server and referenced correctly.

Once the above is completed, we can reference ‘font-family’ property in the body element of the web page to specify the font that should be used.

So as Punk Security uses Hugo for our web site, this is quite easy, but what about the businesses who use web engines like WordPress? WordPress themes don’t provide you with a method to switch to local fonts, but in the famous words from Hitchhikers guide to the galaxy … “Don’t panic”. You can use a WordPress plugin to host the font files locally. We found four different apps in the WordPress marketplace, the most popular one was OMGF.

Method 2: Get user consent.

So with the consideration of the web site performance, it is generally better to use Google Fonts directly from the Google Server. However, for this, you need to get the user’s consent first.

In order to remain GDPR compliant, you will need to modify the web site script to load a generic font until the user consents for the use of Google Fonts. There are third party solutions which can help you with this kind of solution, such as CookieYes.

Final thoughts

So, in conclusion we decided that using Method 1 would work best for us, as we use Cloudflare CDN and AWS S3 buckets to host our site.

We also decided it was too much hassle to use Google services, such as Google Analytics and Google Fonts, and remain GDPR compliant. We really hope that in the near future, Google will start to host GDPR compliant Font and analytic services in the EU region.

However, this might be your approach, so I would encourage everyone to pick the right path for you.

I will leave you with a few take away pointers about using Google Fonts:

1. Consent: Under GDPR, collecting and processing personal data typically requires explicit consent from the user. If a website using Google Fonts obtains proper consent from its users for collecting and processing their IP addresses for analytical purposes, it may be in compliance.

2. Legitimate Interest: GDPR allows for the processing of personal data if it is necessary for a legitimate interest, provided that this interest is not overridden by the individual’s rights and interests.

3. Data Minimisation: GDPR encourages data minimisation, meaning that only the necessary data should be collected. If Google Fonts collects only IP addresses and uses them exclusively for analytics related to font delivery and not for any other purposes, it may align with data minimisation principles.

4. Transparency: Websites using Google Fonts should be transparent about their data collection practices, including the use of Google Fonts and the data collected. Clear privacy policies and user notifications are essential.

5. Data Processing Agreement (DPA): If a website owner uses Google Fonts, they should ensure that they have a Data Processing Agreement in place with Google. This agreement outlines Google’s responsibilities and compliance with GDPR requirements.

6. Anonymisation: If Google Fonts anonymises IP addresses or takes measures to ensure that individual users cannot be identified, it may help mitigate GDPR concerns.

For more information, email us at [email protected] or call us on 0161 660 3545