Webdesign

Google Fonts DSGVO-Konform einbinden

Lesedauer ca. 13 Minuten
Inhalt

Anleitung mit WordPress & Elementor Pro

Es ist richtig schön, dass man seit einiger Zeit nicht mehr die langweiligen Standard-Schriften im Web nutzen kann. Danke für diesen wunderschönen gestalterischen Fortschritt – Mein Design-Herz hüpft! Erst durch Webfonts sind auf Webseiten ansprechende, typografische Gestaltungen möglich, was vorher meist nur Print-Publikationen vorbehalten war. Der beliebteste Webfonts-Dienstleister sind die Google Fonts.

Du kannst deine Schriften aber nicht nur von Google mit deiner Website verbinden. Sobald du eine Web-Lizenz einer Schrift (aus einem beliebigen Shop, wie z.B. Creative Market) gekauft hast, ist es möglich, diese Schrift auf deiner Webseite einzubinden. Es gibt mehrere Wege die Schriften DSGVO-Konform einzubinden. Da ich mit WordPress und Elementor Pro arbeite, zeige ich dir diesen Weg.

Google Fonts auf deiner Webseite lokal einbinden

Die „DSGVO-konforme“ Variante

Wie man dem Titel schon entnehmen kann, gibt es bei der Einbindung wieder mal einiges zu beachten. Die meisten WordPress-Themes & PageBuilder (wie z.B. Elementor) stellen automatisch eine Verbindung zu den Google Fonts her. Alles schön und gut. Nur ist das hier in Deutschland wieder mal nicht ganz Datenschutz-Konform. Laut Google werden zwar keine personenbezogenen Daten erhoben, aber wer rechtlich auf der sichereren Seite sein mag, wählt einen anderen Weg: Man bindet die Google Fonts lokal ein und trennt die Verbindung zu Google. In diesem Artikel kannst du mehr über das Thema nachlesen.

Hinweis

Bitte mach vorab IMMER eine Sicherung, wenn du etwas Grundlegendes an deiner Webseite anpasst oder aktualisierst. Man weiß nie, ob am Ende doch etwas passiert, was man nicht möchte und dann sitzt man da und hat eine kaputte Seite. Falls was passieren sollte, kann man die alte Seite mit wenigen Klicks wiederherstellen. Wenn du Probleme haben solltest, frag einen Profi, der dir dabei hilft.

Schritt 1: Verwendete Google Fonts ausfindig machen

Google Fonts über die Entwicklerkonsole finden

Keine Angst – es klingt schlimmer als es ist. Über die Entwicklerkonsole wird dir direkt gezeigt, welche Google Fonts geladen werden. ich nutze hierzu gern Chrome. du gehst wie folgt vor:

Für Chrome: Klicke den Tab Network. Aktualisiere nun deine Website, damit du siehst, was alles geladen wird. In der oberen Leiste aktivierst du den Filter „Fonts“. Nun zeigt dir Chrome alle Schriftarten an, die geladen werden.

Sobald du hier auf eine beliebige Schriftart klickst, siehst du den Pfad, aus welchem diese Schriftart geladen wird. Wenn der Pfad ungefähr so aussieht: https://fonts.gstatic.com/s/actor/v17/wEOzEBbCkc5cO0ejVSkPU9IP.woff2 ist die Verbindung noch zu Google hergestellt.

Sobald du hier auf eine beliebige Schriftart klickst, siehst du den Pfad, aus welchem diese Schriftart geladen wird. In meinem Beispiel habe ich die Schriften bereits lokal auf meiner Webseite eingebunden und die Schriftart wird über meine Domain geladen. Wenn der Pfad ungefähr so aussieht: https://fonts.gstatic.com/s/actor/v17/wEOzEBbCkc5cO0ejVSkPU9IP.woff2 ist die Verbindung noch zu Google hergestellt.

Schritt 2: Benötigte Google Fonts herunterladen

Nachdem du nun herausgefunden hast, welche Google Fonts du nutzt, solltest du diese herunterladen, um die Schriften lokal auf deiner Webseite einzubinden. Gehe auf die Google Fonts Webseite und lade dir deine Schriften herunter.

So. Nun sollte die Schrift schonmal in deinem Downloadordner auf deinem Rechner zu finden sein. 🙂

Schritt 3: Verbindung zu Google Fonts deaktivieren

Verbindung von Google Fonts mit einem Code trennen

Du solltest nun die Verbindung zum Google Server trennen, da wir ja die Schriften in Elementor einbinden wollen. Falls du deine Schriften über ein Plugin eingebunden hattest, reicht es dieses zu deaktivieren. Ich gebe dir hier einen Code an die Hand, den du in WordPress einbinden kannst:

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

Verbindung von Google Fonts mit einem Plugin trennen

Es  gibt natürlich auch Plugins, die die Verbindung zu Google trennen. Und das Ganze super einfach per Knopfdruck. Hier gibt es verschiedene Plugins, das externe Laden von Google Schriften deaktivieren können.

Ich empfehle dir das Plugin Autoptimize. Dieses Plugin ist  dazu da, um Ladezeiten zu optimieren. Aber ebenso kannst du damit auch Google Fonts entfernen. Das geht wie folgt:

Wenn du dir jetzt deine Website nochmal ansiehst, könnte es sein, dass sich die Schrift etwas verändert hat. Keine Panik, das fixen wir gleich.

Schritt 4: Schriften in Elementor hochladen

Hinweis: Diese Funktion ist nur freigeschaltet, wenn du Elementor Pro nutzt. Anfangs nutzte ich selbst die kostenlose Version, jedoch liebe ich die vielen freigeschalteten Funktionen darin und möchte sie nicht mehr missen! Für ca. 50$ im Jahr kann man zu dem Preis wirklich nix sagen.

Tipp

Lade wirklich nur die Schriftarten und die Schriftstärken hoch die du verwendest. so sparst du dir Speicherplatz.

Nun ploppen ein paar Zeilen auf. dort kannst du die Schrift hochladen. Manche Schriftarten haben unterschiedliche Stärken. Diese kannst du oben unter „Schriftstärke“ und „Stil“ auswählen. Wähle für jede Schriftstärke mit dem Button „Schriftart Variante hinzufügen“ eine weitere aus. Du lädst nur eine Datei in das passende Feld hoch. Anhand des Dateinamens siehst du, wo du die Datei hochladen kannst. Bei den Google Fonts wähle die „TTF Datei“ aus.

Wenn du dir jetzt deine Website nochmal ansiehst, könnte es sein, dass sich die Schrift wieder etwas verändert hat. Darum kümmern wir uns jetzt.

Schritt 5: Schriften in Elementor auswählen

Bei „Body“ findest du den Punkt „Typografie“. Dort ist ein kleiner Stift abgebildet auf den du klickst. Ein neues Fenster hat sich geöffnet. Bei der „Schriftfamilie“ kannst du nun unter „eigene Schriften“ deine hochgeladene Schrift entdecken. wähle dort deine Schrift und den Schriftschnitt aus und speichere die Seite.

Wiederhole diesen Schritt wenn nötig mit den zugewiesenen Überschriften H1, H2, etc. und schau dir deine Seite in einem neuen Fenster an. Passt alles? Es kann sein, dass du noch ein wenig die Schriftgrößen anpassen musst. hier kannst du dich gern ein wenig ausprobieren.

Hinweis: Vergiss in diesem Fall nicht die mobilen Versionen (Responsiver Modus) anzupassen. Sonst sieht die Schriftgröße am Desktop wunderbar aus aber auf dem Smartphone oder Tablet zerschießt es dir alles.

Zu guter Letzt: Prüfe, ob alle Google Fonts lokal geladen werden

Im letzten Schritt solltest du nochmal überprüfen, ob tatsächlich alle Google Fonts lokal eingebunden sind.

Dafür öffnest du deine Seite wieder in einem Inkognitofenster​ und wiederholst Schritt 1 dieser Anleitung. Leitet der Pfad der Schrift auf deine Seite? Herzlichen Glückwunsch! Du hast deine Schriften DSGVO-Konform eingebunden!

Um eine leichtere Lesbarkeit des Textes zu gewährleisten, wurde darauf verzichtet, geschlechtsspezifische Formulierungen zu verwenden.

Lass mir gerne deine Gedanken da

Hinterlasse eine Antwort

Diese Beiträge könnten auch was für dich sein

Hey, hier schreibt Jasmin :)

Ich bin eine Grafikdesignerin, die mit viel Empathie und Herz bei der Sache ist. Meine Arbeit liebe ich von den Haarspitzen bis ganz tief in meine Wurzeln.

Komm mit mir nach mindori <3

Hast du Lust neue Universen zu entdecken? Lerne meinen verträumten Newsletter kennen und tauche tiefer in meine Welt ein. Alles was du brauchst ist ein Schlüssel, den ich dir nach deiner Anmeldung zukommen lasse.