Google Fonts in 7 Schritten DSGVO-konform in WordPress nutzen


Wenn du Google Fonts für deine Webseite nutzen möchtest solltest du sie lokal einbinden, da sie sonst eine Verbindung zum Google Server aufbauen was deine Seite nicht mehr DSGVO -konform nutzbar macht.

Daher zeige ich dir in 7 einfachen Schritten wie du Google Fonts DSGVO-konform nutzen kannst.

Notwendig dank der DSGVO: Google Fonts sollten lokal eingebunden werden

Anstatt die Schriften vom Google Server zu laden, kannst du diese auch lokal auf deinem eigenen Server speichern. So kannst du Google Fonts nutzen ohne das eine Verbindung zum Google Server aufgebaut werden muss.

Am Beispiel von WordPress will ich dir die notwendigen Schritte in diesem Artikel zeigen.

1. Finde heraus, welche Google Fonts du nutzt

Im ersten Schritt solltest du erst einmal herausfinden welche Google Fonts für dein verwendetes Theme überhaupt benötigt werden. Daher ist notwendig herauszufinden, welche Google Fonts für deine Webseite geladen werden.

Theme-Optionen

Je nach Theme kannst du in den Theme Optionen herausfinden welche Google Fonts dein Theme benötigt.

Schaue dazu im WordPress-Adminbereich nach.

Die Einstellungen für die Google Fonts kannst du hier finden:

  • in einem eigenen Menüpunkt
  • in einem Unterpunkt von Design oder Einstellungen
  • unter Design > Customizer

Je nach Theme können die gesuchten Optionen oder Punkte Typografie, Typography, Fonts oder Schriftarten heißen.

Wenn du die Einstellungen gefunden hast schreibst du dir auf, welche Google Fonts genau verwenden werden und in welcher Stärke (100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold etc.).

Plugins

Auch einige Plugins laden Google Fonts und binden diese so ein.

Hier einige Beispiele von Plugins die Google Fonts laden:

Bei Plugins die über iframesOpens in a new tab. geladen werden, wie bei Google Maps oder reCAPTCHA bleibt dir nur diese komplett zu entfernen.

Entwickler-Konsole

Du solltest dir immer auch die Entwickler Konsole in deinem Browser anscheuen.In der Entwickler-Konsole siehst du vielleicht zusätzlich, welche Google Fonts geladen werden.

Um die Entwickler Konsole zu öffnen klickst du mit der rechte Maustaste auf deine Webseite und dann klickst du auf „Element untersuchen„.

Jetzt öffnet sich auf der rechten Seite die Entwickler Konsole. Oben in den Reitern klickst du auf Sources, nun siehst du alle Quellen die deine Seite nutzt um Ressourcen zuladen. Darunter auch Google Fonts.

Google Fonts verbergen sich häufig unter folgenden Punkten:

  • fonts.googleapis.com
  • fonts.gstatic.com

2. Nutze deine Theme Optionen

Bei manchen Themes kannst du in den Theme-Optionen einstellen, dass Google Fonts lokal geladen werden. So sparst du du dir einiges an Arbeit.

Zum Beispiel bei folgenden Themes ist dies möglich:

  • Avada (unter Avada > Theme Options > Advanced > Privacy > Google Fonts Mode)
  • DiviOpens in a new tab. (eigene Schriftarten nutzen)
  • Enfold (eigene Schriftarten nutzen)

Sieh dir auf jeden Fall den Changelog deines Themes an. Viele Entwickler haben ihre Themes im Rahmen der DSGVO angepasst und eine Option hinzugefügt um Google Fonts lokal einzubinden.

System-Fonts nutzen

In vielen Fällen kannst du Google Fonts auch durch durch System-Schriftarten ersetzen. System Schriftarten sind Fonts die sowieso auf jedem System installiert sind (wie zum Beispiel Arial).

Das einbinden von System Schriften statt Google Fonts kommt auch deiner Ladezeit zu Gute.

Natürlich ist es nicht immer möglich oder Sinnvoll Systemschriften zu nutzen. Oft passen diese einfach nicht zu deinem Webseiten Design.

Besonders Serifenlose Schriften, wie z. B. Open SansOpens in a new tab. oder RobotoOpens in a new tab. lassen sich meist sehr gut ersetzen.Schriftarten mit Serifen lassen sich in den meisten Fällen nicht durch System Schriftarten ersetzen.

Times New Roman und Georgia sind furchtbare Schriftarten, die nicht ins Web gehören.

3. Schriftarten herunterladen

Jetzt musst du die Fonts die du benötigst herunterladen. Am einfachsten geht das mit den Plugin Google Webfonts HelperOpens in a new tab..

Webfonts HelperOpens in a new tab. läd nicht nur die Schriftarten herunter sondern liefert gleich den CSS Code mit, den du später noch brauchen wirst.

  1. Bei select charsets (Charset = Zeichenkodierung) solltest du alles so lassen. Es sei denn dein Blog ist auf Griechisch oder Polnisch
  2. Bei select styles wählst du die Stärken aus, die du auf deinem Blog verwenden willst. 700 solltest du immer nehmen, da 700 Fettschrift entspricht. Wenn du das nicht machst, sieht Fettschrift ausgefranst aus
  3. Bei Copy CSS wählst du Best Support aus (voreingestellt) und kopierst den CSS-Code heraus
  4. Jetzt kannst du das Font-Paket im ZIP-Format herunterladen

4. Auf den FTP-Server hochladen

Hast du das Font-Packet heruntergeladen musst du die Font-Dateien auf deinen FTP-Server hochladen.

Nutze dazu ein FTP-Programm deiner Wahl. Iach nutze seit Jahren FileZilla.

Im Hauptverzeichnis deiner Domain legst du einen Ordner an den du „fonts“ nennst. In den fonts Ordner kopierst du nun die heruntergeladenen Schriftarten hinein.

5. CSS-Code einfügen

Damit die hochbeladenen Schriftarten auch gefunden werden musst du deinem Browser es per CSS mitteilen.

Dzu kopierst du den CSS-Code (Den du in schritt 3 generiert hast), in die style.css-Datei deines Child-Themes.

Verwendest du mehrere Schrifttypen oder Schriftstärken fügst du die Code Abschnitte untereinander ein.

6. Google Fonts entfernen

Du solltest noch Sicherstellen, dass keine Verbindung zum Google Server hergestellt wird.

Die einfachste und sauberste Art dies zu tun ist mittels Plugin. Ich stelle dir die meiner Meinnung nach 2 besten Plugins vor um Google Fonts zu entfernen.

Autoptimize

AutoptimizeOpens in a new tab. ist eigentlich ein Plugin um deine Ladezeiten zu verbessern. Doch auch Google Fonts kannst du mit dem Plugin entfernen.

Google Fonts lassen sich dort Einstellungen > Autoptimize > Extras > Google Fonts entfernen

Mit dem Plugin kannst du auch direkt die Emojis entfernen.

Dadurch lädt deine Seite noch einmal schneller.

Remove Google Fonts References

Nicht immer funktioniert die Entfernung der Google Fonts mit Autooptimize

Abhilfe kann das Plugin Remove Google Fonts ReferencesOpens in a new tab. schaffen. Dieses Plugin schafft es Google Fonts in 98% aller Fälle zu entfernen.

Auch wenn das Plugin seit längerem nicht mehr aktualisiert wurde funktioniert es noch immer ohne Probleme.

7. Das Ergebnis überprüfen

Zuletzt löschst du den Cache deines Caching-Plugins und von Autoptimize sowie die Dateien in deinem Browser-Cache.

Jetzt kannst du dir deine Website (am besten ausgeloggt) ansehen und die in den Entwickler-Konsole öffnen um zu sehen ob alle Google Fonts lokal laden und keine Verbindung mehr zum Google Server hergestellt wird.

Zusammenfassung

Mit Einführung der DSGVO ist es nötig Google Fonts lokal einzubinden, wenn du Google Fonts für deine Webseite nutzen willst.

Um das zu tun solltest du erst einmal herausfinden welche Google Fonts du überhaupt benötigst. Dann solltest du die benötigten Schriften herunterladen und die heruntergeladenen Dateien auf deinen Server hochlaen.

Nun musst du nur noch per CSS die heruntergeladenen Schriften eingebunden werden.

jens

Jens Evers ist der Gründer von Content-Ninja. Er ist WordPress-Fan, Blogger und SEO-Experte seit mehr als 10 Jahren. Seine Spezialität ist das erstellen Themen-relevanter Blogs. Er zeigt dir wie du Traffic auf deine Inhalte Leitest und wie du durch wertvolle Beiträge mehr Geld verdienen kannst.

Leave a Reply

Your email address will not be published. Required fields are marked *

Meine neusten Artikel

Verpasse nichts und sicher dir jetzt mein gratis Geschenk!

Verpasse nichts und sicher dir jetzt mein gratis Geschenk!

Wenn du erfahren willst, wenn ein neuer Beitrag veröffentlicht wird und du gratis mein Geschenk bekommen willst, dann melde dich einfach zum kostenlosen Content-Ninja.de Newsletter an!

Du hast dich erfolgreich eingetragen.