How to use Google Fonts and be GDPR compliant?
Until you do not have consent to collect IP addresses and other personal data, you should block the Google Fonts API to be GDPR compliant. Your web pages will be presented with the correct fonts only if the website user has given consent prior, or if the cache of the website user already contains the required Font Files and CSS code requested by the stylesheet of the web page.
Alternatively, there are several options to avoid being fined or sued for violating the GDPR with Google Fonts.
Host Google Fonts locally
Saving locally the Google Fonts to your website server eliminates sending personal data to Google’s servers, and thus eliminates violating the GDPR.
You can download the Google Fonts files and upload them to your website host. Then you’ll have to provide rules to your CSS files on how to use Google Fonts for your web pages. To host Google Fonts locally, you should perform the following steps:
- Download Google Fonts to your server.
- Generate a stylesheet for your Google Fonts.
- Disable Google Fonts.
Self-hosting of Google Fonts is the most popular solution to use Google Fonts and be compliant with the GDPR.
Use the OMGF WordPress plugin
If you are using WordPress, the best plugin to use Google Fonts is OMGF (Optimize my Google Fonts). The OMGF automatically downloads the Google Fonts your WordPress site needs and generates a stylesheet for it. Then it integrates the stylesheet into your site’s header. As a result, your Google Fonts are hosted and loaded locally which is GDPR compliant.
There are also other WordPress plugins for disabling or removing Google Fonts from your website and using them locally. The following WordPress plugins could be used to disable Google Fonts:
- Beaver Builder
- Revolution Slider
Use WordPress default fonts
The simplest solution for WordPress users is to use the default system fonts. These default fonts are already stored locally at your WordPress servers, so your website users do not have to connect with Google servers and send them their personal data. However, WordPress has just a limited number of default fonts.
Get user consent
Lastly, if you want your website to use Google Fonts directly from Google servers, you must request and get user consent to use their personal data. You should inform website users that their IP addresses will be sent to Google servers to provide your website with Google Fonts. Using this option, your website loading speed will be the highest.
The user should be prompted for consent BEFORE a website requests to the Google servers for Google Fonts and Google Fonts API takes place.
Google Fonts code is a code provided by a third party, in this case- Google, which needs users' IP addresses to provide a code. IP addresses and other users' personal data are collected with the help of cookies. To use Third-Party Cookies, you need to get user consent. So, change the initial Google Fonts code to get user consent with CookieScript.
For example, change the Roboto code from:
<link data-href="http://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet" type="text/css">Change the code to modified Google Fonts Roboto code:
<link data-href="http://fonts.googleapis.com/css?family=Roboto:100" data-cookiescript="accepted" data-cookiecategory="functionality" rel="stylesheet" type="text/css">