DSGVO-konforme Web Fonts in WordPress

|
DSGVO-konforme Webfonts in WordPress
Web Fonts sind eine tolle Sache. Sie verleihen deiner Seite einen persönlicheren Charakter und sind einfach zu verwenden. Jedoch müssen Sie DSGVO-konform eingebunden werden, sonst drohen Abmahnungen. Das WordPress Team hat in einer Ankündigung daher empfohlen, Web Fonts lokal zu hosten.

WordPress Themes aktualisieren

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.

Genutzte Google Fonts identifizieren

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.

Schriften entfernen

Plugin zur Einbindung von Google Fonts

Das 
Macht deine Arbeit leichter Hosting

mittwald
Hosting neu gedacht

Natürlich gibt es in WordPress Plugins, die Schriften von Google einbinden. Ein beliebtes Beispiel ist „Easy Google Fonts“. Falls ihr für die Nutzung der Google Fonts solch ein Plugin nutzt, reicht es, in der Regel dieses zu deaktivieren.

Jetzt sehen die Schriften auf deiner Seite natürlich anders aus. Wie du jetzt weitermachst, erfährst du im Abschnitt Schriften lokal einbinden.

Fremde Themes

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.

Schriften lokal einbinden

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.

Selbst entwickelte Themes

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ßende Überprüfung

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.

Ähnliche Artikel:

Anleitung für die manuelle Sicherheitskopie oder per Plugin
Webentwicklung

WordPress Backup erstellen − so gelingt es mit Plugin und manuell 

Ein Backup kann dein WordPress Projekt retten. Wir erklären Schritt für Schritt, wie du ein Backup mit Plugin und manuell erstellst.

Freelancer Hannes Gesmann im Interview
Hosting

“Performance ist das Zusammenspiel von Frontend, Backend und Hosting” − Freelancer Hannes Gesmann im Gespräch

Das Hosting ist eine der wichtigsten Zutaten für top Pagespeed. Freelancer Hannes Gesmann erzählt im Interview, auf was es ankommt.

Philipp Stranghöner und Michael Worobcuk
Webentwicklung

So funktioniert der dauerhafte Betrieb einer Node.js-App − Mittwald Experten im Gespräch

Eine Node.js-App dauerhaft zu betreiben, ist bei Mittwald kein Hexenwerk. Unsere Experten unterhalten sich darüber, was es dabei zu beachten gilt.

Kommentare

Christian L. am
Lieber Lukas,

vielen dank für diesen ausführlichen Artikel. Die richtige Schriftart für die Website zu wählen und im Anschluss zu überprüfen ist ein wichtiger Aspekt.

Liebe Grüße
Christian L.