Google Fonts and GDPR: How to Stay Compliant?

Last updated on March 14, 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.

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.

Here are two methods to make Google Fonts privacy friendly.

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.

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. 

In this situation, you must modify the script for prior user consent with CookieYes. Here is an example of the Open Sans font:

<script>
document.addEventListener("cookieyes_consent_update", function (eventData) {
  const data = eventData.detail;
  if (
    data.accepted.includes("functional") &&
    !document.getElementById("google-fonts-styles")
  ) {
    const head = document.getElementsByTagName("head")[0];
    const link = document.createElement("link");
    link.id = "google-fonts-styles";
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href =
"https://fonts.googleapis.com/css?family=Open+Sans:wght@300&display=swap";
    head.appendChild(link);
  }
});
</script>