Google Fonts blockieren: So entfernst du die Verbindung zu deiner Website

4. März 2022
Lesedauer: 4 Minuten
Update 15.07.23

Worum geht's?

Die meisten WordPress-Themes & PageBuilder (wie Bspw. Elementor)  stellen automatisch eine Verbindung zu Google Fonts her.
Google Fonts ist eine Plattform von Google, wo es ganz viele kostenlose Schriftarten gibt. Diese werden bequem über einen Code auf deiner Website eingebunden. 

Aus DSGVO-Sicht, ist diese automatische Integration hier in Deutschland nicht zulässig. Deshalb sollte deine Website nie automatisch eine Verbindung zu Google Fonts herstellen. (hier kannst du mehr über das Thema nachlesen).

In der Konsequenz bedeutet das, dass du die Fonts lokal hosten (einbinden) und die Verbindung zu Google trennen musst.
-> Hast du einen Brief von einem Anwalt bekommen? Dann lies dir hier den Beitrag von Dr. Max Greger durch, wie du dich am Besten verhalten sollst wenn du eine Abmahnung erhältst inkl. Musterschreiben. 

Aber zuerst Einmal trennen wir Google endgültig von deiner Website und binden die Google Fonts lokal ein! 

In meinem Mini Tutorial zeige ich dir,

  • wie du erkennst, ob deine Website eine Verbindung zu Google aufbaut
  • was du tun musst, um das zu unterbinden 
  • wie du deine Google Fonts mit Hilfe von Elementor lokal hostest (einbindest)

 

Verwendete Ressourcen: 

  • WordPress
  • Elementor
  • Elementor Pro
  • Hello-Theme
  • Hello Child-Theme
 
Seit einem der letzten Updates von Elementor, kannst du im Page Builder direkt ebenfalls einstellen, dass keine Verbindung zu Google Fonts hergestellt wird. Du findest unten unter “Neue Funktion: Verbindung zu Google Fonts beim Elementor Page Builder deaktivieren”.

Das Tutorial:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Code aus dem Video, den du in deiner functions.php einfügen musst

				
					/* ---Disable Google Fonts---*/
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
				
			

Der Theme-Datei-Editor ist bei dir nicht da?

Es gibt zwei Gründe, wieso der Theme-Datei-Editor in deinem WordPress Backend nicht angezeigt wird. 
Entweder es ist eine Voreinstellung deines Hosters oder es hängt mit einem Plugin zusammen, 

Du hast zwei Möglichkeiten: 

1. Schalte alle Plugins temporär aus und prüfe, ob der Theme-Datei-Editor danach da ist. Sollte er da sein, fügst du den Code in deine functions.php Datei ein und schaltest danach alle Plugins wieder an.  Es gibt Plugins, die den Theme-Datei-Editor deaktivieren, weil er eine Sicherheitslücke sein kann, worauf Hacker zugreifen können. 

Wenn das nicht funktioniert hat dann kontaktiere deinen Hoster und frage nach dem Theme-Datei-Editor 

2. Greife auf die funtions.php Datei über deinen FTP Server zu und füge dort den oben genannten Code ein. Das würde ich dir allerdings nur empfehlen, wenn du dich Sicher fühlst! 

Neue Funktion: Verbindung zu Google Fonts beim Elementor Page Builder deaktivieren

Seit einem der letzten Updates von Elementor kannst du dort einstellen, dass Google Fonts bei Elementor blockiert werden. Achtung! Das schließt NICHT aus, dass Google Fonts von anderen Plugins geladen werden. Deshalb immer über die Entwickler-Konsole deines Browsers kontrollieren, ob Google Fonts auch wirklich blockiert werden. 
Du findest die Einstellung in deinem Backend unter:
Elementor > Einstellungen > Erweitert 

Google Fonts blockieren

Setze dort den Status auf “Deaktivieren”, damit keine Verbindung von Elementor zu Google Fonts hergestellt wird. 

Video Transkription

Wenn du deine Website mit WordPress und Elementor erstellt hast und du deine Schriften auch über Elementor einbindest, dann stellt deine Website am Ende eine Verbindung zu Google Fonts her und das wollen wir auf jeden Fall verhindern.

Wenn du prüfen möchtest, ob das bei dir der Fall ist, dann öffne deine Webseite, ich habe sie jetzt hier mit Chrome im Inkognito-Modus geöffnet, geh einmal auf Anzeige, Entwickler und Entwicklertools Und dann kannst du hier oben Sources auswählen und dann siehst du hier auch welche Verbindungen er hat.

Und du siehst hier, er bindet etwas über oder er stellt eine Verbindung zu Google Fonts her und hier siehst du auch welche Schriftfamilie das tut, nämlich die Lato-Schrift. Und die habe ich über Elementor eingebunden. Was wir jetzt als erstes tun, ist, dass wir die Schriftart bei Google Fonts Downloaden. Jetzt suche ich einmal Lato. Hier ist die Schrift und die kann ich hier oben rechts die komplette Familie downloaden. Um jetzt zu verhindern, dass er eine Verbindung herstellt, gehst du einmal bei Design auf den Theme Datei Editor.

In meinem Fall verwende ich das Hello-Theme und ich habe ein Child-Theme erstellt. Das heißt bei mir sind hier auch rechts weniger Funktionen. Das kann bei dir etwas anders aussehen, je nachdem ob du ein Child-Theme erstellt hast oder nicht. Wichtig ist, dass wir auf diese Functions.php gehen und den Code, den du unterhalb dieses Videos findest, einmal hier rein kopieren. Jetzt gehen wir auf Datei aktualisieren und wenn du jetzt auf die Website zurück gehst, dann sieht die Schrift schon anders aus. Sie ist jetzt auf einmal ganz dünn. Und dazu prüfe ich jetzt mal, welche Schriften ich in Elementor hochgeladen habe.

Ich habe hier schon verschiedene Schriften hochgeladen und hier füge ich jetzt die Lato-Schrift ein.

Dazu gehe ich auf Add New, gebe hier einmal Lato ein und hier kann ich jetzt die unterschiedlichen Fonts hochladen. Unterschiedlichen Fonts hochladen. Die Latuschschrift, die kommt in unterschiedlichen Stärken, also muss ich für jede Stärke, die ich natürlich auch nur auf der Webseite verwende, die Datei hochladen. Das heißt ich beginne jetzt mal mit der light Version, die ist bei 300 und bei Style normal. Jetzt gehe ich hier auf TTF File und lade hier die Schrift rein. Ich wähle jetzt auch noch die kursive Schrift aus, das heißt ich gehe einfach auf Add Font, gehe wieder auf 300 und auf Italic, gehe wieder auf ttf, weil ich eine ttf-File habe. Wenn du jetzt eine woff-Datei hast oder eine woff2, dann wählst du natürlich deine Datei aus. Und ich wähle jetzt auch noch einen Normal, die normale Schriftstärke aus und auch hier nehme ich wieder beide Varianten, einmal normal und einmal italic.

Wenn ich alle Schriftschnitte habe, die ich brauche, gehe ich auf veröffentlichen und dann sehe ich hier schon meine Schrift. Jetzt sieht die Schrift hier ganz dünn aus. Jetzt wähle ich mich einmal einen Elementor und prüfe, ob ich die richtige Schrift gewählt habe. Dazu gehe ich auf Website-Einstellungen, gehe auf meine Typografie und er hat hier auch schon Lato ausgewählt. Jetzt gehe ich mal auf die 400er, nein die 300er ist die richtige und gehe auf speichern und auf Elemente verlassen. Und schon hat er hier meine Schrift ersetzt. Jetzt prüfen wir natürlich nochmal, ob denn wirklich keine Verbindung mehr zu Google Fonts hergestellt wird. Dazu habe ich die Webseite wieder im Inkognito Fenster geöffnet und gehe wieder auf Anzeige Entwickler und Entwickler Tools und schon sehe ich hier, dass Google Fonts hier nicht mehr zu finden ist.

Deine Steffi

Hier Weiterlesen

Herzlich Willkommen in
meinem Inner Circle

Hier wirfst du einen Blick hinter die Kulissen und erhältst wertvolle Tipps rund um Design & Business und bekommst alle Infos zu neuen Angeboten & freien Kapazitäten. 
Wenn du einmal monatlich vielmehr insights erhalten möchtest, trage dich hier ein:

Aktueller Beitrag

Stefanie Friedel1

Hi, ich bin Steffi

Ich bin Brand & Webdesign Mentorin und teile in meinem Blog Strategien und Design-Tipps für dein Business. 

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Glossar
Webdesignerin

Hi, ich bin Steffi

Ich arbeite seit 2009 als Designerin und gebe auf meinem Blog Strategie, Business und Design-Tipps für dich.

Inhalt

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Glossar

Child Theme

Ein “Child Theme” ist eine Art von WordPress-Theme, das die Funktionalität und das Design eines anderen Themes, des sogenannten “Parent Themes”, erbt und erweitert. Es ermöglicht dir, Anpassungen am Design oder an der Funktionalität deiner Website vorzunehmen, ohne das ursprüngliche Parent Theme zu verändern. So bleiben deine Änderungen auch nach einem Update des Parent Themes erhalten. Child Themes sind besonders nützlich, wenn du Anpassungen am Code vornehmen möchtest, ohne das Risiko einzugehen, dass deine Änderungen bei einem Update des Hauptthemes verloren gehen.

Website-Checkliste

Hole dir die
Website-Checkliste

Trage dich jetzt in meinen Newsletter ein