Google Fonts – Insights into GDPR-compliant usage

Google Fonts – Insights into GDPR-compliant usage

Google Fonts made headlines last year due to a wave of cease-and-desist letters. The warning was based on the fact that the integration of Google Fonts into a website is not GDPR compliant. In our article , you will learn how to deal with a warning letter and what steps you should take.
But what are Google Fonts anyway, and is it possible to integrate them into a website in compliance with the GDPR? We will clarify these questions in the following article.

Google Fonts – That’s behind it

Google Fonts is Google’s answer to the problem of the fonts used on websites. Because until a few years ago, some fonts could not be displayed on every device. Google established a free directory of fonts.

These are e.g. B. directly integrated into the website by code snippets. When the website is opened, the font is then loaded directly from the Google server. By loading the font, there is no need to worry about a delay in building the website.

The problem

This dynamic solution does not burden your server capacity. But this is exactly where the conflict with the GDPR lies. When operating a website, it is essential to comply with legal regulations, for example, that legal consent must be obtained before data can be transferred to third countries.
If Google Webfonts are dynamically integrated, information is retrieved from Google servers when the page is loaded. These servers are hosted in the USA and are therefore not fully protected and secured by the European General Data Protection Regulation (GDPR). However, this poses a challenge as the font must be loaded prior to obtaining consent and consent to transfer data to the US is a legal gray area.

Google Fonts – Insights into GDPR-compliant usage

The local integration

Google Fonts allows you to integrate a font directly via the Google CDN. When you select a font on Google Fonts, you’ll be presented with a code snippet that you can use to load a CSS file directly from Google. This CSS file contains the necessary @font-face commands to embed the font.
If you copy the path to the file and access the file directly, you can view the CSS file that Google loads. There you will find the paths to the individual fonts. This gives you the ability to collect individual font files and the required CSS snippets.

Supported by Google

Select the respective character set, select the desired font styles, copy the generated CSS code and finally download the files. Optionally, the path of the fonts folder can be specified. For multiple fonts, this process must be completed for each one individually.
Google Fonts Helper is a valuable tool to simplify the process of font selection and integration. Select the appropriate font from all available Google Fonts and use the CSS generator to get a finished code that you can insert directly into your style sheet. Four simple steps will help you:
Select a character set:

  • The available character sets for the respective font are displayed.
  • Select the font styles you need for your project
  • Copy the CSS code: The CSS code that takes the previous selections into account will be generated automatically.
  • Paste the generated CSS code under “Customize folder prefix (optional)” directly into the path of the folder where you save the font.
  • Download the files: The files are downloaded as a ZIP file and must be unzipped and placed in the fonts folder on your server. If you need multiple fonts, you’ll need to go through the steps for each individual font.

Be careful when integrating other Google services

When integrating other Google and third-party services, including Google Maps, YouTube or plugins that use Google Fonts, ensure compliance with data protection laws. These services connect to Google servers and may transmit personally identifiable information such as IP addresses.

There is also the possibility that other personal data will be collected, which requires the clarification and consent of the visitors to your website. Therefore, make sure that you inform your visitors about the data transfer and obtain their consent.

Let us create your professional website now!