In this article, I’ll show you how to embed Google Fonts in Elementor in a privacy-compliant way. You can also watch the video (english subtitles) below:
First of all, what are Google Fonts?
Google offers thousands of free fonts to embed in your website. This allows you to display text in more visually appealing fonts.
Advantage: The fonts are easy to integrate (or already included by default in many tools like Elementor) and work without problems on almost all common browsers and are easy to integrate.
The problem
Google Fonts are either dynamically or locally integrated.
Dynamically embedded fonts
The fonts are loaded from Google servers located in the USA. In the process, the IP address of your website visitors is also transmitted to Google. Since an IP address is uniquely assignable, it counts as „personal data“. Elementor loads Google Fonts dynamically by default.
Locally embedded fonts
The fonts are loaded locally from your web server, where your website is located. The IP address is not transmitted to Google.
The solution
There are two solutions to this problem: 1. you get consent from your website visitors and clarify that their IP address will be transferred to servers in the USA. You can get consent with cookie management plugins like the one from Borlabs.
(the recommended solution!): You embed the Google Fonts locally2. (the recommended solution!): You embed the Google Fonts locally
How to embed Google Fonts locally in Elementor?
This is actually quite simple: You select the desired fonts here at https://google-webfonts-helper.herokuapp.com, select the font styles via checkboxes and click on the download button below. Now you can download the fonts you would like to use on your website.
After you have downloaded the files, unzip the ZIP folder and you will see your downloaded fonts.
Now we want to upload them to Elementor by going to „Elementor“ -> „Custom Fonts“ in the WordPress backend.
There you can now specify the name for the font. So that it is not too confusing, I always write the name of the Google Font in there with the addition „(local)“ so that I immediately recognize that it is the locally integrated font.
Underneath, you will now upload the individual font files that you have previously downloaded. After you have uploaded all files, you must save this font.
Once this is done, your font will appear in the text settings or typography settings in Elementor Editor.
At the top of the list are now your created fonts, below that are the system and external (dynamic) Google Fonts.
Make sure that you have selected the new font with the addition „(local)“ everywhere.
Disable external Google Fonts in Elementor
To make sure you don’t load external Google Fonts, you can also disable them. There are two ways to do this:
1. you insert the following code line into the functions.php of your theme:1. you insert the following code line into the functions.php of your theme:
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );2. with a plugin like Disable and Remove Google Fonts or also in the settings of the plugin Autoptimize the Google Fonts can be deactivated.2. with a plugin like Disable and Remove Google Fonts or also in the settings of the plugin Autoptimize the Google Fonts can be deactivated.
Privacy policy and Google Fonts
Even if you embed your Google Fonts locally, you should inform your website visitors about the use of locally embedded Google Fonts in your privacy policy.
I hope this article has helped you. If you have any questions, feel free to leave a comment below.
