WordPress Google Fonts

Google offers a vast selection of fonts to help you enhance the style of your website. But that’s not all: Google Fonts are easy to download and can be quickly integrated into the WordPress backend. However, if you download these fonts and load them via the Google server, it raises data privacy concerns in the EU, as the fonts are fetched from this server. This means that, among other things, the user’s IP address, browser, and referrer are transmitted to Google. This violates GDPR regulations because a) it happens in the background, and b) users cannot actively consent to or reject this process.

Loading from Google servers in the EU not compliant with data protection regulations

GDPR, who? Experienced professionals are already familiar with it. If you’re new to working with websites, you’ll encounter this abbreviation frequently. In fact, it will become your constant companion, and you should make the GDPR your best friend: It stands for General Data Protection Regulation, a set of legal rules designed to protect the data of internet users. Since the latest regulations, websites must include a cookie notice. This informs users about the data collected during their visit and gives them the option to accept or decline this data processing. If a user clicks “decline,” the website cannot store any data, such as IP addresses, session duration, click behavior, etc. Nothing works without consent: the cookie notice must be implemented, and it protects website operators from legal repercussions. True to the phrase “the cookie notice regulates,” by providing users with clear options and obtaining their active consent, you are on solid legal ground – along with implementing your privacy policy.

The situation is different with Google Fonts. These are automatically loaded via Google servers, which is not compliant with data protection laws in the EU, as Google automatically transfers this personal data to the USA.

Data transfers to the USA – problematic and unlawful

According to the EU definition, the USA is considered a third country with an inadequate level of data protection. Occasionally, the third-country classification is challenged in international courts, only for those decisions to be reversed shortly after. The root of these disputes lies in US legislation, such as the Cloud Act, which allows US authorities to access data stored by US companies like Google – even if that data is physically located outside the USA. This means that any data transferred to the USA and stored by US companies is potentially subject to access by US authorities. This situation directly contradicts the General Data Protection Regulation (GDPR), which aims to ensure the protection of personal data within the EU.

Using Google Fonts anyway: locally and therefore in compliance with the GDPR

If you’ve already said goodbye to your favorite fonts, don’t worry – we’ve got good news. There’s a data protection-compliant way to integrate all Google Fonts locally, so you won’t have to fear any legal consequences. To do this, simply download Google Fonts and host them locally on your own web server in WordPress. One thing to keep in mind: You are free to use Google’s open-source fonts on any website, whether it’s for business or personal use.

Hosting Google Fonts locally: step-by-step guide

It takes a few steps to embed or host Google Fonts locally. But don’t worry – we’ve put together a guide below to help you successfully embed your fonts in compliance with the GDPR, without sacrificing your preferred design in WordPress. Most importantly, this will protect your users from third-party access and ensure their privacy. So, let’s get started and sever your connection to the Google server!

1. Identify Google Fonts used

First and foremost, it’s important to identify the Google Fonts used on your WordPress website to determine exactly which fonts are being utilized. This is especially crucial if your website was created by a third party and you aren’t sure which fonts were used. You have two options for identification.

Via plugin

One option to identify your Google Fonts is to use the WordPress plugin OMGF. While it may sound like a new term, it stands for “Optimize My Google Fonts.” You can easily download it for free from the plugin directory. OMGF then automatically scans your website for Google Fonts loaded from external servers and gives you the option to host these fonts locally.

Via source code

By delving a bit deeper into your theme, you can also identify Google Fonts in the HTML source code. To do this, open your website’s front end and press Ctrl + U. A new window will open displaying the full source code. In this window, search for “fonts.googleapis.com” and “font.gstatic.com.” When you find these, the corresponding font will be listed on the same line.

In the settings of the themes used

Behind the scenes of your WordPress website, you can also identify Google Fonts in the settings of the theme you’re using. To do this, go to your dashboard, click on “Design,” and then select “Customizer” or navigate to “Theme Options.” In either case, look for the “Typography” or “Fonts” section. If Google Fonts are being used, you’ll often come across font files like Roboto or Lato.

The third option is to access the theme editor in the WordPress backend via “Design.” This allows you to search for “fonts.googleapis.com” in files like functions.php or CSS files such as style.css. This will reveal the exact Google Fonts that the theme is loading.

2. Remove Google Fonts from plugins and themes

Now you have an overview of how many, and most importantly, which Google Fonts are used in your theme. On to step 2: Get rid of them! And you don’t need to play programmer, because technical support is here: The WordPress plugin “Disable and Remove Google Fonts” helps you remove the fonts. Simply download the plugin and run it. The plugin will delete all Google Fonts from your WordPress website without you needing to take any additional steps. You’ve set the foundation for a fresh start!

Control with the development console

But of course: trust is good, but control is better! After using the plugin, you should double-check to ensure that all Google Fonts have been removed. The best way to do this is through the development console. In your WordPress dashboard, go to “Customizer” under “Design” and press Ctrl + U. This will open the development console, where you can view all the fonts.

3. Download required Google Fonts

You have now technically disconnected your WordPress website from the Google server. Next, it’s time to restore your font style – after all, you don’t want to rely on your theme’s system fonts going forward. To do this, download the fonts you need directly from the official Google Fonts website, or you can use the Google Webfont Helper tool!

Select styles or download the entire ‘Family’

When downloading, you have the option to download individual styles such as regular, italic, or bold for each font, or the entire font family. It’s recommended to only combine the individual styles of Google Fonts into one download package, as this helps avoid the risk of the font files becoming too large and taking up unnecessary space on your server.

Using the notes on the Google Fonts you previously identified in your style.css, you can easily search for the exact font in the search form and download it directly.

Customize format and upload fonts

No matter which method you choose, all Google Fonts are automatically downloaded as TrueType font files (.tff). Unfortunately, it’s not possible to upload these fonts to your server in this format. Therefore, you’ll need to convert them to .woff, .woff2, or .eot. This is where the Google Web Fonts Helper comes in handy. You can use this tool to download all the desired fonts in the appropriate format.

Once you’ve downloaded the fonts, including the CSS code, you can upload the files to your website’s FTP server. Be sure to place the fonts in a subdirectory of your child theme titled /fonts, or in the standard fonts directory under /wp-content/themes/fonts.

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');