Why Self-Hosting is better than blocking the Google Fonts API
In Complianz you will get notified if you’re using Google Fonts and directed to our recommendation below, self-hosting Google Fonts. You can read our considerations for self-hosting, instead of blocking Google Fonts below. And the technical limitations concerning Google Fonts and consent.
Blocking Google Fonts on WordPress
Blocking Google Fonts might not always be possible without manual configuration. Complianz can block an API call or javascript that handles fetching and processing Google Fonts, but some requests are made by CSS imports or template files and need manual deletion to fully block or remove an API call. You will also find that in many cases these requests are multiplied by different plugins and themes in your configuration and require manual configuration.
For example: Avada uses an @font-face approach (which you use for self-hosting as well) and requests the API directly from a minified, combined CSS file with randomized string. Blocking this .CSS file is not difficult, but blocking all combined CSS to block Google Fonts is far more intrusive than self-hosting Google Fonts.
What happens if you ask consent for Google Fonts
If you would be able to block Google Fonts, either with our script center or custom coding, you will face the next technical challenge:
Prior to consent, all font-families will default to a browser fallback. After consent the Google Fonts API will apply new font-families creating a new experience for you users and more manual configuration to make sure the difference in styling is minimal by applying more CSS styling and testing for lay-out shifts, different font-sizes, weights, etc.
Example: in the case of this user, a product page is designed based on the Google Fonts. Before consent however, the Google Fonts are blocked and also affects the size, and causes a lay-out shift.
Privacy by Design and removing the Google Fonts API
We always opt for the easiest, technical robust and best outcome for our users. This is why we recommend self-hosting Google Fonts, which removes the need for consent management, extra styling and will decrease requests improving performance. The last effort is to remove all notions of Google Fonts and self-host your fonts with a plugin like OMGF,.
How to Self-host Google Fonts
We will use OMGF as an example, but there are more plugins that can achieve the same result. This plugin will scan your website for font-families and will download them locally so you can proceed to use the self-hosted fonts and remove Google Fonts API’s manually.
Download OMGF
Download OMGF | Optimize My Google Fonts from the WordPress repository like you would any other plugin. Activate and go to Settings > Optimize Google Fonts.
You will see the Task Manager. Make sure you read the instructions, specifically related to caching as you might need to clear all caching for OMGF to find all stylesheets. Save & Optimize and you will find a changed status:
Optimising loading your local Google Fonts
If the stylesheet is created by OMGF you have the possibility to optimize loading your Google Fonts. This is optional, but might increase performance. If you’re still developing your website this list might grow larger, please keep this in mind.
Deleting Google Fonts Requests with OMGF, Autoptimize or Manually
There are multiple options to remove the API requests and Google Fonts from your theme. You can use the built-in option from OMGF, which tries it automatically, but as explained earlier some instances need manual configuration
You can use another great plugin, called Autoptimize which has the same option under Extra’s.
or you can do it manually. Use the OMGF documentation to help with manually deleting your theme’s Google Fonts requests.
Check if you’re still requesting the Google Fonts API
The fastest way is to check if you have any requests from Google Fonts API. We will use an incognito browser window, and the console to check your network connections.
- Open your website incognito, and go to the developers console (View – Developer – Developer Tools). Under the tab ‘Network‘, refresh your website.
- On the left-hand side, on top you can search for the following parameter: ‘https://fonts.‘
- The results will let you know where there are still references to Google Fonts.
Make sure you see a URL with where the request code status is 200. You can find it under the same tab, Network, on the right hand side you will find: “Headers”. Select a URL, and see what the status code is. (Disable caching for optimal results).
Update: In recent months Google has updated their explanation and terms of using Google Fonts; which can be found under: “What does using the Google Fonts API mean for the privacy of my users?” at https://developers.google.com/fonts/faq. Further investigation what this means for using Google Fonts as a service is under way. Why blocking Google Fonts is necessary you can read in this article.
