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.
- Öffne Google Chrome und klicke auf der Leiste ganz oben auf "Datei" -> "Neues Inkognitofenster"
- Rufe deine Webseite auf
- Klicke in dem neuen Fenster auf "Network"
- Aktualisiere deine Website, damit du siehst, was alles geladen wird
- Aktiviere in der oberen Leiste den Filter "Fonts"
- Jetzt 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.
- Gib im Suchfed den Namen der Schrift ein, die du benötigst
- Wähle die Schrift aus und klicke rechts oben auf den Button "Download family"
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' );
- Melde dich im Backend deiner Webseite an
- Gehe in der Linken Spalte auf -> "Design" -> "Theme-Datei-Editor"
- Klicke ganz rechts auf die "functions.php"
- Kopiere dir den Code aus diesem Beitrag und füge ihn ganz unten in der Datei ein
- Klicke auf den Button "Datei aktualisieren"
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:
- Melde dich im Backend deiner Webseite an
- Gehe in der Linken Spalte auf -> "Einstellungen" -> "Autoptimize"
- Gehe zum Punkt "Extras"
- Wähle "Google Fonts entfernen" aus
- Klicke auf den Button "Änderungen speichern"
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.
- Gehe in der Linken Spalte auf -> "Elementor" -> "Benutzerdefinierte Schriftarten"
- Ganz oben findest du einen Button mit "Add New". Klicke darauf
- Gib den Namen der Schrift ein, die du gerne hochladen möchtest
- Klicke auf den Button "Schriftart Variante hinzufügen"
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 alle Schriftschnitte eingefügt hast, die du brauchst, klicke auf den Button "Veröffentlichen"
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
- Gehe hierzu auf eine beliebige Seite und bearbeite sie mit Elementor
- Klicke oben links auf die drei Striche im Elementor-Menü
- Gehe zum Punkt "Website Einstelllungen"
- Gehe zum Punkt "Website-Einstelllungen" -> "Typografie
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.
