Utilize Google Fonts to customize your website's appearance with a wide selection of fonts hosted on Google servers. To ensure GDPR compliance and avoid data transmission without explicit consent, it's essential to install GDPR-compliant Google Fonts. Let's explore how to achieve this using MyAgilePrivacy.
If you're using a page builder that automatically includes Google Fonts, you can learn how to embed the fonts you use directly on your site at the end of this article.
Solution 1 - automatic scan
You can leverage the advanced "Cookie Shield" feature, which automatically detects this software.
Simply set the Shield to "Learning" mode, browse your site's pages, and find your configuration ready.
However, for better graphical rendering of your website, manual configuration is recommended for this software.
Solution 2 - manual configuration
Part 1 - identifying the code of Google Fonts
As a first step, locate the code for the Google Fonts you want to install.
It will look something like this below, depending on which and how many fonts you decide to include:
Part 2 - Locating the Cookie for Google Fonts on the MyAgilePrivacy Cookie List
On your WordPress website admin, from the left menu, go to: MyAgilePrivacy -> Cookie List
You will find the list of cookies that were imported when the plugin was installed.
Initially you will see them all in a draft state. You will have to post only the cookies on your website.
On this screen you will see a series of columns:
- Cookie Name: the name of the Cookie
- Is Necessary: indicates whether or not the cookie is essential to site navigation. If rejecting the cookie makes the site unusable, then it is essential. You will find this information pre-filled in the cookie details.
- Auto Update: indicates whether the cookie reference text (which we will see in a moment) remains automatically updated or not. If the setting is on "yes," we will automatically take care of updating the cookie reference texts to keep everything up to date according to GDPR regulations.
- Installation Type: tells you the insertion type chosen for the cookie. This value will be changed depending on the type of inclusion needed, and we will see this together within the guides.
To install the Google Fonts cookie, search the list for the one with the title "Google Fonts (Google Inc.)" and click on it.
The detail page contains pre-filled informational text and 2 blank fields where the code can be entered.
The pre-filled text is visible in the cookie policy, and it is that information that is automatically updated to be up-to-date and compliant when the "Allow Automatic Update" setting is set to "yes."
Immediately below the text, you will find the option to select the "Type of Installation" (Javascript and Noscript, or Raw).
Select from the "Raw Code" dropdown, and you will see a field called "raw html code."
Part 3 - Entering the Google Fonts Inclusion Code
What's left for you to do is to take the Google Fonts embed code and insert it as is inside the "Html Raw Code" field.
Remember to save and publish the Cookie by pressing the blue "Publish" button in the upper right corner.
Final part - verification of proper operation
Now all you have to do is check whether you have correctly included Google Fonts.
When you load any page on your website you will see that your chosen font is not loaded (instead you will find the browser's default font) until you expressly give consent to the installation of the cookie, either by clicking "I agree" on the cookie acceptance bar, or by going to "Customize" and activating the cookie.
Bonus - what to do if you use a page builder or plugin that incorporates Google Fonts?
Many page builders like Elementor and Visual Composer, along with dedicated plugins, automatically embed Google Fonts on your site, offering extensive font customization options. However, they may not comply with GDPR regulations regarding font embedding.
To address this issue, consider using the Embed Google Fonts plugin (download it by clicking here). This plug-and-play solution allows you to install and activate it on your site effortlessly. Simply search through your themes and plugins for fonts sourced from Google Fonts, download these fonts to your website, and replace the files, using the locally hosted fonts instead of those on Google servers.
With this plugin, you can ensure compliance with GDPR regulations while maintaining font customization options.
