4. Install Google Fonts in the child theme
Last but not least, you need to install the fonts you’ve uploaded to your server in your WordPress child theme. Unfortunately, simply uploading them to the FTP server isn’t enough: While the fonts are physically available on the server, neither WordPress nor the browser knows they exist or how to use them.
This means that the fonts must be installed for recognition and mapping – not in the parent theme, but in the child theme. If you only install the fonts in the parent theme and make changes in style.css, these changes will be overwritten during an update. Installing the fonts in the child theme ensures that your customizations are protected from being lost.
There are two options available for installing your Google Fonts.
Download CSS
When downloading your Google Fonts, you can also generate the corresponding CSS. This CSS code, which you can copy from the Google Webfont Helper, can then be inserted into your style.css file.
Make sure that you have the correct file path for the font files.
Replace the file paths in the CSS and update the child theme
After implementing the CSS code, you need to assign the desired elements to the fonts in the CSS file of your WordPress child theme.
It is then important to update the child theme. Once this step is complete, you should check again to ensure the Google Fonts are truly integrated locally. To do this, you can install the “Remove Google Fonts References” plugin, which detects any remaining Google Fonts after you have cleared your cache and run the plugin.
Alternatively, you can also have your website checked using the Google Fonts Checker on www.sicher3.de. Simply enter your website’s URL into the checker, click “check,” and wait for the result.
Be careful with Google Maps
Oh, it could all be so perfect: your cookie notice is working flawlessly, your Google Fonts are locally integrated in WordPress, and the annoying connection to the Google server is a thing of the past. But what’s this? Google Maps is peeking mischievously around the corner!
Yes, you read that right – Google doesn’t let itself be easily booted out and has added a little “gift” to its Maps application that the GDPR won’t be too happy about: If you have integrated Google Maps, you could run into data protection issues.
The reason behind this is the Roboto font, which is used for displays in Google Maps and – surprise – is loaded from Google’s servers. Fortunately, there is a solution for this as well. While it’s not possible to locally integrate this particular Google font in WordPress, it can still be easily removed. How? Simply create the file /js/norobotofontbymaps.js in your child theme’s directory and insert the following code:
¡var head = document.getElementsByTagName('head')[0];//Save the original method
var insertBefore = head.insertBefore;
// Replace it!
head.insertBefore = function (newElement, referenceElement) {
if (newElement.href &&
newElement.href.indexOf('//Fonts.googleapis.com/css?family=Roboto') > -1) {
console.info('Prevented Roboto from loading!');
return;
}
insertBefore.call(head, newElement, referenceElement);
};
Finally, insert the following code into the php of your child theme:
/*Prevent roboto Fonts loaded by google Maps api*/
$child_theme_url = get_stylesheet_directory_uri();
wp_register_script( 'norobotofontbymaps',
$child_theem_url.'/js/norobotofontbymaps.js', 'jquery', "1", true);
wp_enqueue_script ('norobotofontbymaps');
