Google Fonts and DSGVO / GDPR | SP Page Builder (Pro) 3.x - Documentation | JoomShaper

SP Page Builder (Pro) 3.x

Updated Last: 30 September 2022

Google Fonts and DSGVO / GDPR

According to German DSGVO law, we do not recommend using Google Fonts loading from the Google Servers. The German court (in Jan 2022, LG München, Urteil vom 20.01.2022, Az. 3 O 17493/20) deemed this a violation of Europe’s GDPR (General Data Protection Regulation) because Google Fonts exposes the visitor’s IP address.  The German court’s ruling threatens a fine for each case of infringement or, alternatively, six months imprisonment, if the site owner does not comply and continues to provide Google with IP addresses through their use of Google Fonts.

Since SP Page Builder v3.8.4  in Options you have a new switcher that allows you to disable Google Fonts from use. The new Disable Google Fonts option will allow you to choose whether you want Google Fonts (and its html code) to load or not. 

In the case of Joomla 3.10 users, navigate to the top right corner of your dashboard to find ‘Options’, and scroll down to SP Page Builder Pro. There you should be able to find ‘Disable Google Fonts’ and hit Yes.

on - off Google Fonts

In the case of Joomla 4 users, simply navigate to the Components > SP Page Builder > Pages and choose ‘Options’ on the top right corner. Simply scroll down to find ‘Disable Google Fonts’ and choose Yes in case you don’t want the Google Fonts loading in your font list. 

Google Fonts Off

To avoid legal problems for European webmasters/editors we suggest two safe options:

  • Use default system fonts (Arial, Tahoma, Verdana, Helvetica, Times New Roman, etc.) without connecting to Google servers.
  • If you want to continue using Google Fonts in a more privacy-respecting way, there are many tutorials (also ours) for self-hosting the fonts instead.

After reading whole article please follow tips "How to use custom fonts" from: https://www.joomshaper.com/documentation/helix-framework/helixultimate/faq-how-to-do

Important! Check the front-end source code of your website and if you would notice that Google Fonts is loading, but they are disabled in Helix Ultimate / Helix3 in Typography settings, it means that probably those fonts are because one of the addons (or more) have set Google Fonts in Font-Family field.

You have to check all addons used on your Page(s) and Modules from SP Page Builder. Check one by one, and disable all Google Fonts from Font-Family select field, and then save settings.

No Google Fonts

It is possible to download the desired Google fonts, integrate them locally, and then cut the connection to the Google servers. This procedure does not require consent and the legality is even confirmed in Google's FAQ on Google Fonts. However, this option has a negative effect on the loading times and the integrated search engine optimization from Google, and updating the font is also the responsibility of the website operator (owner/webmaster).

If you want to use your custom Google font for the title in addons or text in general, you have:

  1. Download the needed font (more tips below)
  2. Upload it to your website server
  3. And use the class name with font name inside the custom.css file or Custom CSS field.

This is the only trusted way.

Example code for addon titles, we used that online tool: https://google-webfonts-helper.herokuapp.com/fonts/

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
.sppb-addon-title { font-family: "Roboto";}

 


The official Google Fonts website (https://fonts.google.com/)  also has a font generator that allows you to download any font after the weight choice. But the downloaded package contains only font files and does not have any CSS/HTML file with examples of how to use it.

GF download

If you are a German webmaster you can also watch a video tutorial prepared by our user >> https://www.youtube.com/watch?v=VMfytsdxKHs