Seit der DSGVO muss man sich als Webdesigner intensiver mit der Thematik Datenschutz beschäftigen. Viele Produkte von amerikanischen Unternehmen, z.Bsp das Divi-Theme von Elegant Themes ist leider von Haus ist nicht mit dem deutschen Datenschutz konform, da in Amerika diese Thematik keine große Rolle spielt.

Das Divi-Theme bindet nämlich Google Fonts extern von Googles Servern ein, von der Adresse: fonts.gstatic.com. Falls du überprüfen willst, ob auch dein Theme oder deine Webseite Google Fonts extern einbindet, kannst du auf dieser Seite alle deine externen Daten-aufrufe überprüfen.

Standardmäßig wirst du beim Divi-Theme Aufrufe zu fonts.gstatic.com sehen. Die Gesetzeslage hierzu ist nicht ganz geklärt, fakt ist aber, dass zum Aufrufen der Schriftarten die IP des Benutzers an Google gegeben werden muss.

Dies geschieht meistens ohne der Einwilligung des Nutzers. Was Google genau mit dieser IP macht, ist nicht klar, jedoch ist dies eine unfreiwillige Weitergabe der IP und bietet dadurch die Möglichkeit zur Abmahnung.

Um auf der sicheren Seite zu sein, sollte man alle Schriftarten Lokal einbinden. Wir machen dies nun Anhand des Divi-Themes, dieselbe Methode lässt sich aber auch mit den meisten anderen Themes umsetzen.

Hier ist die Beschreibung in kurz, für Leute die es schnell haben wollen.

Wie man bei Divi Google Fonts lokal einbindet

  1. Zu den Einstellungen von Divi gehen unter: Divi -> Theme Options -> Use Google Fonts und dort Google Fonts deaktivieren.
  2. Die gewünschte Font bei Google Webfonts Helper auswählen.
  3. Die Font auf WordPress hochladen und das angegebene CSS in einer extra Datei hochladen.
  4. Die CSS Datei in der functions.php zu WordPress einbinden
  5. In der Custom CSS Datei den verschiedenen Überschriften und Paragraphen die richtige Schriftart zuordnen.

 

Und hier kommt die Beschreibung in lang:

  1. Der erste Punkt ist relativ simple, man deaktiviert lediglich die Google Fonts in WordPress.

 

2. Dann wählt man auf Google Webfonts Helper die Schriftarten aus, die man haben will und kopiert das angegebene CSS.

 

3. Man kopiert das CSS in eine eigenständige Datei und lädt sie z.Bsp. in das Child-Theme oder ein eigens erstelltes Plugin hoch.

4. Das CSS muss mit PHP geladen werden, da es sonst Geschwindigkeitsprobleme geben kann. Hier ist ein Beispiel wie man ein ganzes Plugin für die Fonts erstellen kann.

5. Als letztes kann man nun in der eigenen CSS-Datei den verschiedenen Überschriften und Paragrafen (oder Body Text) die jeweiligen Schriftarten zuordnen. Wie das genau funktioniert seht ihr hier.

Dann hat man alle seine Fonts lokal eingebunden und kann dies ebenfalls mit der Seite von webpagetest.org überprüfen.

Das erste Mal erscheint dies vielleicht etwas kompliziert, aber wenn man es einmal gemacht hat, kennt man sich aus und kann bei jedem Theme die Fonts lokal einbinden.