Require consent before loading Google Fonts – Cookiebot Support

Google Fonts is a font embedding service library from Google, allowing developers to add fonts to their Android apps and websites simply by referencing a stylesheet.

A regional court in the German city of Munich ordered a website operator to pay €100 in damages for transferring a user's personal data — i.e., IP address — to Google via the search giant's Fonts library without the individual's consent the 20^th of January of 2022:

The unauthorized disclosure of an IP address to Google constitutes a contravention of the user's privacy rights as the website operator could theoretically combine the gathered information with other third-party data to identify the "persons behind the IP address."

Ruling issued by Landgericht München's third civil chamber in Munich

Under the European Union's General Data Protection Regulation (GDPR), data points such as IP addresses, advertising IDs, and cookies are counted as personal identifiable information (PII), making it mandatory for businesses to seek users' explicit permission before processing such information.

The following code conditionally loads Google Fonts if a visitor has consented to cookies in the "marketing" category.

Instructions:

Remove any existing <link> elements that loads Google Fonts.
Add the script in the <head> section of the page.
Change the URL assigned to e.href in the script to match the font(s) that you use on the page.

<script type="text/plain" data-cookieconsent="marketing">
  !function(d, l, s) {
    const e = d.createElement(l); e.rel = s;
    e.href = "https://fonts.googleapis.com/css?family=Tangerine|Inconsolata&effect=shadow-multiple";
    d.head.appendChild(e);
  }(document, "link", "stylesheet")
</script>

The full page example below shows how the above script only allows the fonts to be loaded if consent has been given to marketing cookies.
You will need to use your own CBID if you want to test this on your own domain.

<html>
  <head>
    <title>Google Fonts Example Page</title>     
    <script
      id="Cookiebot"
      type="text/javascript"
      src="https://consent.cookiebot.com/uc.js"
      data-cbid="00000000-0000-0000-0000-000000000000"
      async
    ></script>
    <style>
      h1 {
        font-family: 'Tangerine', serif;
        font-size: 48px;       
      }

      p {
        font-family: 'Inconsolata', sans-serif;
        font-size: 12px;
      }     
    </style>     
    <script type="text/plain" data-cookieconsent="marketing">
      !function(d, l, s) {
        const e = d.createElement(l); e.rel = s;
        e.href = 'https://fonts.googleapis.com/css?family=Tangerine|Inconsolata&effect=shadow-multiple';
        d.head.appendChild(e);
      }(document, "link", "stylesheet")     
    </script>
  </head>
  <body>
    <h1 class="font-effect-shadow-multiple">Google Fonts with Consent Only!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </body>
</html>

For more information about Google Fonts, please see Google's documentation on the Google Fonts API.

Our scanner currently does not detect Google Fonts as a potential tracking mechanism, so if you wish to have the use of Google Fonts displayed in the Cookiebot banner and declaration, you should declare it manually in the Cookiebot Manager. Please see the screenshots below, showing how this can be achieved and how it will be displayed in our Swift banner:

You can read Googles own FAQ regarding the privacy and data collection done when using the Google Fonts Web API here: https://developers.google.com/fonts/faq/privacy.