DSGVO-konforme Web Fonts in WordPress

Das Themes-Team empfiehlt den Theme-Autoren dringend, ihre Themes zu aktualisieren. Wir empfehlen die Aktualisierung durch den Wechsel zu lokal gehosteten Web Fonts. Gleichzeitig sollen auch die Core Themes angepasst werden. Aber wie kannst du das bei deiner Seite umstellen? Was musst du beachten?

Wir haben bereits 2018 allgemein erklärt, wie Web Fonts lokal eingebunden werden können. Diesen Beitrag haben wir kürzlich aktualisiert. An dieser Stelle soll es nun aber spezifisch um die Umsetzung für WordPress gehen.

Bevor du loslegen kannst, musst du natürlich erstmal wissen, welche Fonts überhaupt eingesetzt werden und von wo diese geladen werden. Am zuverlässigsten lässt sich das über die Developer Tools deines Browsers herausfinden. Unter dem Punkt „Sources“ bzw. „Quellen“ kannst du nachvollziehen, welche Daten für deine Website geladen werden. In manchen Browsern (z. B. Safari) ist der Bereich „Netzwerk“ hilfreicher. Hier kann man sich nur Schriften anzeigen lassen und sieht direkt die Domain, an die die Anfrage geht. Kritisch sind alle externen Domains, im Falle von Google Fonts sind das fonts.googleapis.com und fonts.gstatic.com.

Übrigens kannst du an dieser Stelle später auch überprüfen, ob tatsächlich keine Inhalte mehr vom Google Server geladen werden.

Werden die Schriften durch ein Theme geladen, kannst du dir am einfachsten mit dem Plugin Disable Google Fonts oder Disable and Remove Google Fonts helfen. Einfach das Plugin installieren und aktivieren – und schon werden die Schriften nicht mehr geladen. Das funktioniert bei vielen Themes, wie zum Beispiel den Core-Themes (twenty-*) aber auch einigen anderen, sehr gut.

Jetzt werden die Schriften nicht mehr geladen und die Darstellung der Texte hat sich daher geändert. Wie du jetzt weitermachst, erfährst du im nächsten Abschnitt.

Hast du die bisher von Google geladenen Schriften entfernt, dann sieht deine Seite natürlich ein bisschen anders aus. Schließlich fehlen die Schriften.

Um die Schriften jetzt von deinem Server zu laden, solltest du zunächst ein Child-Theme erstellen. Möchtest du das nicht manuell machen, kannst du auch das Plugin Child Theme Configurator dafür nutzen. Halte dich dann an die allgemeine Anleitung zum lokalen Einbinden von Google Fonts. Das CSS und die Schrift-Dateien fügst du in dein Child-Theme ein. Vermutlich musst du jetzt noch ein paar CSS-Regeln definieren, damit deine Texte tatsächlich auch in der gewählten Schrift angezeigt werden.

Damit werden die Schriften dann aber von deinem Server geladen und trotzdem hast du ein individuelles Erscheinungsbild.

Bist du selber Theme-Entwickler und nutzt für deine Seite etwas Eigenes, ist es das Beste, wenn du dein Theme direkt anpasst. Klar, in manchen Fällen klappt das auch durch die genannten Plugins, optimal ist das aber natürlich nicht.

Bei einem selbst entwickelten Theme solltest du die Referenzen zu den Stylesheets von Google entfernen, egal ob sie über wp_enqueue_style() oder mit einem CSS-@import geladen werden. Füge stattdessen die Schriften direkt in dein Theme ein und ergänze das CSS in der style.css.

Wo du die Schriften findest und wie du sie herunterlädst, erfährst du im allgemeinen Tutorial zum lokalen Einbinden von Google Fonts.

Abschließend solltet ihr eure Webseite neu laden und prüfen, ob die Schriften wie gewünscht geladen und dargestellt werden. In diesem Schritt lohnt es sich auch noch mal die Developer Tools bemühen, um sicherzustellen, dass eure Website tatsächlich nicht mehr mit dem Google Server spricht. ;-) Wenn anstatt den Google Servern (fonts.googleapis.com, fonts.gstatic.com) nun nur noch von deiner Domain geladene Schriften aufgeführt werden, hast du die Schriften erfolgreich und korrekt eingebunden.

Hinweis: Da der Autor dieses Artikels kein Jurist ist, stellt dieser Artikel weder eine Rechtsberatung dar, noch ersetzt er eben diese. Bitte wendet euch im Zweifel an einen Rechtsanwalt.