Why blocking Google Fonts is necessary you can read in this article.
The reason why we are not blocking Google Fonts automatically as we do with most other services is the impact Google Fonts has on your website’s front-end.
Canceling the Google API request will impact your website’s front-end because the Google Fonts will not be set in the browser of your website visitors and will fall back, if possible, to a standard font changing your website dramatically. To solve this problem you can self-host Google Fonts on your own server. For this we will use OMGF. You are of course welcome to use any tool you need or try it manually through your theme.
What we will do in short:
- Downloading your current Fonts to your server
- Generating a stylesheet for your Google Fonts
- Disable Google Fonts
1. Downloading your Google Fonts
Download OMGF | Optimize My Google Fonts from the WordPress repository like you would any other plugin. Activate and go to Settings > Optimize Webfonts.
You will start with searching for your required Google Fonts.
Start with the search bar in the plugin and a dropdown with available font weights will be shown. The most popular subset latin-ext is enabled by default and in most cases will do the job. For example searching for “Roboto” will look like this:
Remove the unwanted variations of the font and continue to download the fonts to your server. Use the “Download” button beneath the Fonts list to start.
When it’s on 100% proceed to step 2.
2. Generating a stylesheet for your Google Fonts
Generating the stylesheet is really easy. Press “Generate Stylesheet” and the stylesheet will be added to your header so you can use the fonts in your CSS or editor, straight from your server! Because you’re now able to show fonts hosted on your server, you can disable the API request to Google Fonts.
3. Deleting Google Fonts Requests with OMGF, AutoOptimize 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 as shown here:
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.
4. Checking to see if it works
The easiest way is to use Complianz! Go the Complianz > Wizard >