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
Das Tutorial:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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
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.
