Google Fonts and GDPR: How to Stay Compliant?
Last updated on October 8, 2024
In compliance with the General Data Protection Regulation (GDPR), Google Fonts collect users’ data, which means the usage of Google Fonts on your website will violate GDPR guidelines and put you at risk.
On January 20, 2022, the German court ruled that websites that include Google Fonts violate the General Data Protection Regulation (GDPR).
How do Google Fonts violate GDPR?
Google Fonts do not set any cookies. However, it is a web font service that provides API to deliver font files. Google Fonts collects user requests, retrieves files from its servers, and delivers them to the end users to generate fonts. In this process, Google’s server records the user’s IP address and may use for analytical purposes.
According to GDPR, an IP address is personal information which can be used for identifying the user. Thus, Google Fonts violates GDPR by collecting and sharing personal information with third-party services without user consent.
How to make Google Fonts GDPR Compliant?
Here are two methods to make Google Fonts privacy friendly.
Method 1: Host Google Font Locally.
To host a Google Font locally, you need to download the font files and then upload them to your web server. You can use the ‘@font-face’ rule in your CSS to reference the font files and use them on your website. Here is an example of how this can be done:
@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; }
In this example, we are using the ‘@font-face’ rule to define a new font called “MyFont”. We are specifying the source of the font files as ‘myfont.woff2’ and ‘ myfont.woff’, which are the font files you will need to upload to your web server. Finally, we are using the ‘font-family’ property to specify that the font should be used for the body element of the page.
If you use WordPress and the theme doesn’t provide you with a method to switch to local fonts, you can use the OMGF plugin. For your WordPress sites, OMGF automatically downloads the Google Fonts for your WordPress site and creates a stylesheet for it. The stylesheet is then integrated into your site’s header, making Google Fonts host and load locally.
Method 2: Get user consent.
Considering the website’s loading speed, it is always better to use Google Fonts directly from the Google Server; for this, you need to get the user’s consent. The Google Font API should be disabled if you don’t have the user consent to collect IP addresses.
For CookieYes plugin users, this method can be implemented only after connecting to the CookieYes Web App.
In this situation, you must modify the script for prior user consent with CookieYes. Here is an example of the Open Sans font:
<script> const googleFontsHref = "https://fonts.googleapis.com/css?family=Open+Sans:wght@300&display=swap"; function addGoogleFonts() { if (!document.getElementById("google-fonts-styles")) { const link = document.createElement("link"); link.id = "google-fonts-styles"; link.rel = "stylesheet"; link.type = "text/css"; link.href = googleFontsHref; document.head.appendChild(link); } } function handleConsentUpdate() { document.addEventListener("cookieyes_consent_update", function (eventData) { const data = eventData.detail; if (data.accepted.includes("functional")) { addGoogleFonts(); } }); } document.addEventListener("cookieyes_banner_load", function (eventData) { const data = eventData.detail; if (data.categories.functional) { addGoogleFonts(); } else { handleConsentUpdate(); } }); </script>
Make sure this script is placed just above the CookieYes script.