Google Fonts and GDPR: How to Stay Compliant?

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.

Note:

On January 20, 2022, the German court ruled that websites that include Google Fonts violate the General Data Protection Regulation (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.

@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;
}

@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.

Note:

For CookieYes plugin users, this method can be implemented only after connecting to the CookieYes Web App.

<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>

<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>

Note:

Make sure this script is placed just above the CookieYes script.

Google Fonts and GDPR: How to Stay Compliant?

On this page

Method 1: Host Google Font Locally.

Have more questions?

Google Fonts and GDPR: How to Stay Compliant?

On this page

How do Google Fonts violate GDPR?

How to make Google Fonts GDPR Compliant?

Method 1: Host Google Font Locally.

Method 2: Get user consent.

Have more questions?