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. In meinem Artikel soll es nun aber spezifisch um die Umsetzung für WordPress gehen.

Bevor du loslegen kannst, solltest du wissen, welche Fonts eingesetzt 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 kannst du dir nur Schriften anzeigen lassen und siehst 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, solltest du als erstes ein Update des Themes machen, sofern verfügbar. Viele Themes, unter anderem die Core-Themes (twenty-\*), wurden in den letzten Jahren überarbeitet und laden in den aktualisierten Versionen die Schriften schon nicht mehr von externen Servern. Hat das noch nicht geholfen, kannst du dir am einfachsten mit einem Plugin wie 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 sehr gut.

Hast du die bisher von Google geladenen Schriften entfernt, dann sieht deine Seite erstmal ein bisschen anders aus, schließlich fehlen die Schriften.

Nutzt du ein modernes Block Theme für die Website, kannst du Schriften sehr einfach hinzufügen. Öffne zunächst den **Website-Editor** unter Design. Dort kannst du unter Stile › Typografie › Schriften die Schriftbibliothek verwalten und neue Schriften direkt von Google installieren. Das geniale an der Sache: Die von dir installierten Schriften werden von Google heruntergeladen und auf deiner Website gespeichert. Deine Website verwendet dann diese lokal gespeicherten Schriften. Die Verbindung zum Google-Server wird also nur während der Installation hergestellt.

Bei manchen älteren Themes gibt es Theme-spezifische Lösungen, um Schriften einzubinden. Da diese jedoch nicht einheitlich implementiert sind, kann ich hier keine allgemeinen Tipps geben; ein Blick in den Customizer unter Design kann aber nicht schaden. Achte dabei aber darauf, dass die Schriften auf deinem Server gespeichert, und nicht über Google geladen werden.

Um Schriften für jedes Theme von deinem Server zu laden, kannst du entweder ein Plugin wie Local Google Fonts nutzen oder du gehst den etwas aufwändigeren Weg, sparst dir aber dadurch das zusätzliche Plugin. Dafür 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 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 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 solltest du deine 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 zu bemühen, um sicherzustellen, dass deine Website tatsächlich nicht mehr mit dem Google Server spricht. Wenn nur noch von deiner Domain geladene Schriften aufgeführt werden – statt den von Google Servern (fonts.googleapis.com, fonts.gstatic.com) – 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.