DSGVO: Google Fonts selber hosten in WordPress

Google Fonts lassen sich in die eigene Website recht einfach einbinden, in dem man die von Google bereitgestellten CSS Regeln zu den eigenen CSS Regeln hinzufügt.

Bei dieser Einbindung werden die Fonts allerdings immer vom Google Server geladen. Denkt man aber an die DSGVO, dann kommen dabei oft Bedenken auf, denn bei diesem Ablauf werden personenbezogene Daten zu Google übertragen. Da der Browser die Fonts direkt vom Google Server herunter lädt, erhält Google auch die IP-Adresse unserer Besucher.

Möchte man das vermeiden, dann muss man die Fonts herunterladen und lokal installieren bzw. einbinden.

Ich zeige dir in diesem Artikel in 4 Schritten, wie du dabei vorgehen musst.

Der Beitrag zeigt dir am Beispiel von WordPress die praktische Umsetzung. Es lässt sich aber auch für jede andere Art der Einbindungen verwenden. Nur die speziellen WordPress Tätigkeiten müssen in diesem Fall weggelassen oder etwas anders durchgeführt werden. Darauf werde ich aber bei den entsprechenden Stellen noch hinweisen.

Der Artikel lässt sich übrigens auch für andere Fontquellen anwenden. Ich zeige dir dabei auch, wie du die Fonts in Webfont Formate umwandeln kannst, falls diese nicht zur Verfügung stehen.

 

Warum selber hosten?

Zuerst einmal stellst du dir sicher die Frage, warum man das überhaupt machen sollte.

Ein persönlicher Grund kann sicher sein, dass du unabhängig sein willst und deshalb alle für deine Besucher bereitgestellten Inhalte von deinem Server ausliefern willst.

 

Die DSGVO

Aktuell ist sicher die DSGVO einer der Gründe, warum sich viele diese Arbeit antun wollen. Nachdem ich diesbezüglich in der letzten Zeit viele Anfragen erhalten habe, war das auch der Grund diese Anleitung zu schreiben.

Das Problem in Bezug auf die DSGVO ist, dass es eigentlich nicht erlaubt ist personenbezogene Daten ohne Zustimmung oder einer entsprechenden Vereinbarung an Dritte zu übermitteln.

Genau das passiert aber beim Abruf von Google Webfonts. Sobald der Browser die Website Inhalte von unserem Server abruft, stößt er in den CSS Regeln auf den Befehl bestimmte verwendete Font Files vom Google Server zu laden. Bei diesem Vorgang erhält Google die IP-Adresse unserer Besucher. Da IP-Adressen personenbezogene Daten sind, bedeutet das, dass wir mit dem Aufruf unserer Webseite dazu beitragen, dass Google personenbezogene Daten unserer Besucher erhält.

Würde der Browser die Webfonts nicht abrufen, dann können die Schriften nicht richtig dargestellt werden und das ganze Design würde nicht wie geplant aussehen. Und das wollen wir sicher auch nicht.

Werden die Font Files allerdings von unserem Server abgerufen, dann haben wir dieses Problem nicht.

 

Performance

Ein weiterer Grund, die Webfonts lokal auf dem eigenen Servern bereitzustellen, kann ein Performance Grund sein. Leider kann man aber bei diesem Thema nicht pauschal sagen, dass lokales Hosting von Google Fonts immer schneller wäre als sie von Google zu holen.

Es gibt natürlich immer bestimmte Verzögerungen, wenn Daten von externen Servern geholt werden müssen, wie etwa zusätzliche DNS Auflösungen.

Auf der anderen Seite sind die Google Server optimiert Fonts rasch und effizient auszuliefern. Verwendet man aber selber auf seinem eigenen Server Optimierungsmethode wie Caching und anderes dann kann die eigene Seite schneller sein.

Schlussendlich findet man das am besten mit testen heraus.

 

Unser eigentlicher Grund war aber das Hosting aus Datenschutzgründen und das nehmen wir jetzt zum Anlass für unsere Umstellung

 

Was zu beachten ist

Bevor ich zur praktischen Umsetzung komme noch einige wichtige Dinge, die du dir vorher noch durchlesen solltest.

 

Recht

Wie sieht es rechtlich mit dem selbst hosten von Google Fonts aus? Nachdem Google Webfonts unter der Open Source Lizenz stehen, sollte ein Ablegen der Fonts auf der eigenen Seite kein Problem sein.

Bei Google heisst es übrigens unter https://fonts.google.com/about#

„All the fonts in our catalog are free and open source, making beautiful type accessible to anyone for any project….“

Prüfe aber bitte zur Sicherheit noch die Lizenz des von dir ausgewählten Fonts.

https://fonts.google.com/attribution

Solltest du Fonts von anderen Quellen herunterladen, dann musst du dich dort in den Lizenzbedingungen genau erkundigen, ob das erlaubt ist.

 

Verfügbarkeit als Webfont

Die Fonts müssen in einem speziellen Webfont Format bereit gestellt werden, damit auch alle Browser damit arbeiten können. Leider stellt Google aber die verschiedenen Webfont Formate nicht mehr direkt zur Verfügung, sondern nur mehr den True Type Font, also das TTF File.

Wir werden aber sehen, dass dieses kleine Problem keine wirkliche Hürde darstellt.

Gehen wir jetzt in die konkrete Umsetzung. Diese besteht aus den folgenden 4 Schritten:

Schritt 1: Google Fonts herunterladen

Schritt 2: Google Fonts auf den eigenen Server übertragen

Schritt 3: Laden von Google Fonts vom Google Server unterbinden

Schritt 4: Google Fonts in CSS einbinden

 

Schritt 1: Google Fonts herunterladen

Warum TTF Files konvertiert werden müssen

Wir vorhin bereits erwähnt, ist es notwendig, dass du über dein CSS kein True Type Fonts Format sondern ein spezielles Web Font Format zu Verfügung stellen musst.

Damit die Sache nicht ganz so einfach ist, verwenden unterschiedliche Browser auch unterschiedliche Webfont Formate. Nur dann ist auch gewährleistet, dass jeder Browser, der Webfonts verarbeiten kann diese auch korrekt darstellt. Wir brauchen also all dieses Files, damit wir sie über unseren Server bereit stellen können.

 

Google Web Fonts herunterladen

Google bietet diesen Download aber leider nicht direkt an, sondern stellt nur verschiedene TTF Files zur Verfügung. Wir könnten jetzt hergehen und über Dienste wie https://www.fontsquirrel.com/tools/webfont-generator aus den TTF Files ein Web Font Paket generieren. Wir können aber auch eine Seite nutzen, die uns diesen Download direkt ermöglicht.

Dazu besuche die Website:

https://google-webfonts-helper.herokuapp.com/fonts

Dort suchst du dir den gewünschten Font und stellst bei Bedarf unter (1) das „Charset“ ein. Unter (2) kann man noch die benötigten Styles auswählen.

In meinem Fall habe ich Roboto – „Regular“ gewählt.

 

Jetzt folgt beim Download Helper der Schritt 3. Den Code der dort angegeben ist, benötigen wir allerdings erst etwas später. Entweder kopierst du dir den Codeblock oder du lässt das Browserfenster offen, bis wir den Inhalt brauchen. Das was du hier siehst ist der Code für die Einbindung meines Beispiel Fonts „Roboto“.

 

Du kannst in diesem Beispiel sehr schön die verschiedenen Webfont Formate erkennen, die für die unterschiedlichen Browser bereitgestellt werden müssen.

Mache jetzt beim Helper mit dem vierten und letzten Schritt weiter und lade dir mit dem Download Button das Paket als ZIP File herunter.

 

Wenn du es heruntergeladen hast dann entpacke das File. Die Inhalte werde wir dann gleich benötigen.

 

Schritt 2: Google Fonts auf den eigenen Server hochladen

In Schritt 2 zwei müssen wir die Fonts aus dem ZIP File aus Schritt 1 auf unseren WordPress Webspace hochladen. Du kannst das entweder über ein FTP Programm oder mittels deinem WEB FTP Zugang (falls dein Provider so etwas bereitstellt) machen.

Wenn du über FTP mit deinem Webspace verbunden bist, dann musst du in das Verzeichnis wechseln, wo sich deine WordPress Installation befindet. Du erkennst dieses Verzeichnis daran, dass sich darin Files wie index.php, wp-config.php und Ordner mit dem Namen wp-admin oder wp-content befinden.

Das Verzeichnis könnte in etwa so aussehen:

 

In diesem Ordner legst du ein neues Verzeichnis mit dem Namen „fonts“ an und überträgst die vorher entpackten Dateien in diesen Folder. Nachher sollte dein WordPress Verzeichnis wie folgt aussehen:

 

Schritt 3: Google Font Download unterbinden

Jetzt haben wir soweit alles vorbereitet um die Fonts in unsere Seite einbinden zu können. Nachdem wir aber verhindern wollen, dass Google Fonts vom Google Server geladen werden, müssen wir uns vorher noch darum kümmern, dass diese wirklich nicht geladen werden.

Ich mache diesen Schritt absichtlich vor der Einbindung, weil ich dann die Deaktivierung visuell besser erkennen kann.

Wie die Fonts deaktiviert werden, hängt mitunter von der Art der Einbindung ab. Wir müssten also die CSS Files oder zusätzlichen CSS Regeln durchsuchen, ob irgendwo die Fonts geladen werden.

Oftmals hat man aber auf die Einbindung gar keinen Zugriff und dann muss man einen kleinen Trick anwenden, den ich dir jetzt zeigen will.

Um den Abruf der Google Fonts zu verhindern, muss man sich die Hilfe eines Plugins holen. Ich habe verschiedene ausprobiert und am Ende nur eines gefunden, das zuverlässig funktioniert hat. Es hat den Namen „Remove Google Fonts References“.

Bevor du das Plugin installierst und aktivierst, solltest du dir eine Seite suchen, auf der Google Webfonts dargestellt werden. Ich habe auf meiner Demo Webseite einige Schriften hinzugefügt, die dann so aussehen:

 

Jetzt kann das Plugin installiert und aktiviert werden. Im Anschluss daran, laden wir unsere Seite neu und das Aussehen hat sich verändert.

 

Damit sehen wir, dass das Plugin seine Arbeit korrekt tut und das Laden der Webfonts verhindert hat.

 

Check ob Fonts von Google geladen werden

Wir sollten zur Sicherheit noch überprüfen, ob auch wirklich keine Daten mehr von Google geladen werden. Das kann man am besten mit den Web Developer Tools der verschiedenen Browser machen.

Ich habe das in meinem Beispiel mit Chrome gemacht. Um diese zu aktivieren, klickst du mit der rechten Maustaste in den Inhaltsbereich deiner Webseite und wählst „Untersuchen“ aus.

Dann klickst du in dem unten erscheinenden Fenster auf den Tab „Network“ und darunter auf „All“.

 

Jetzt kannst du deine Seite (mit deaktivierten Plugin) neu laden. Das Ergebnis sieht bei mir dann so aus:

 

Deutlich kann man hier erstens im Content Bereich den Text mit der Webfont Darstellung erkennen und im Fenster unten bei der Spalte „Domain“ die Einträge „fonts.gstatic.com“. Wir sehen also eindeutig, dass Inhalte von Google geladen werden.

Jetzt aktivieren wir das Plugin wieder und laden die Seite neu. Das Aussehen hat sich wieder verändert:

 

Auch in der Spalte „Domain“ ist eine Änderung eingetreten, die Google Einträge sind wirklich verschwunden. Jetzt können wir also sicher sein, dass keine Daten von und an Google übertragen werden.

 

Schritt 4: Fonts in WordPress Seiten einbinden

Jetzt kommt schon der letzte Schritt. Die von Google heruntergeladenen und auf unserem Webspace hochgeladenen Fonts müssen noch in unsere Seite eingebunden werden, damit diese wieder wie gewünscht aussieht.

Für die Einbindung gibt es verschiedene Wege. Drei davon möchte ich dir jetzt zeigen.

 

1. CSS einbinden über styles.css

Der direkte Weg geht über die in jedem Theme vorhandene styles.css Datei. Entweder kannst du die Inhalte über FTP verändern oder direkt im Backend (Design -> Editor), wenn diese Funktion bei dir aktiv ist.

Doch ACHTUNG – niemals sollte man direkt in der styles.css des Themes arbeiten, sondern immer mit Hilfe eine Child Themes.

Beachtest du das nicht, dann können deine Änderungen und damit deine Schriftanpassungen beim nächsten Update deines Themes weg sein.

Wenn du dein Child Theme hast, dann öffne dort die styles.css Datei und füge den Codeteil, den du dir im Schritt 2 vom Google Webfont Helper kopiert hast oben ein. Natürlich solltest du nicht vergessen die Änderungen zu speichern.

So sieht die Anpassung bei mir aus:

 

Jetzt kannst du deine Inhalte im Browser ansehen und solltest die Inhalte mit deinen Webfonts dargestellt sehen.

Zusätzlich kannst du mit dem oben beschrieben Test in der Entwickler Umgebung des Browser nachsehen, ob die Fonts wirklich nicht vom Google Server kommen.

 

2. CSS einbinden über den Customizer

Wenn du versuchst die CSS Inhalte direkt in der styles.css Datei zu ändern, dann bekommst du einen Hinweis „Es gibt keine Notwendigkeit, dein CSS hier zu ändern. Du kannst CSS-Änderungen mit dem eingebauten CSS-Editor vornehmen und dir diese direkt als Vorschau anzeigen lassen“.

Folgt man dem Link, dann wird der CSS Editor des Customizers geöffnet, wo man den vorbereiteten Code einfügen kann.

Natürlich kannst du auch direkt den Customizer öffnen und unter der Auswahl „Zusätzliches CSS“ den Editor starten.

 

Wichtig an dieser Stelle zu erwähnen, dass wie bei der Änderung über die styles.css Datei bei einem Theme Wechsel die CSS Inhalte nicht übernommen werden. Sie bleiben zwar gespeichert, sind aber an das Theme gebunden.

Auch bei dieser Methode machst du am Ende den Test im Browser um sicher zu gehen, dass deine Änderungen funktionieren.

 

3. CSS einbinden über ein Plugin

Mein persönlicher Favorit ist die Einbindung der CSS Regeln über ein Plugin. Damit erspart man sich das Erstellen eines Child Themes und ich habe eine unabhängige Stelle um diverse CSS Regeln einfügen zu können.

Der Vorteil diese Methode: Ändere ich das Theme, dann bleiben die Regeln auch nach dem Wechsel aktiv.

Das Plugin meiner Wahl ist „Simple Custom CSS“.

 

Wenn das Plugin aktiv ist, dann kann man entweder direkt in der Plugin Liste im Backend beim Plugin mit dem Link „CSS hinzufügen“ auf die Editor Seite kommen oder auch über das Menü unter „Design“ und „Benutzerdefiniertes CSS“.

Auch im Customizer lassen sich die Inhalte dieses Plugins anpassen unter der Auswahl „Simple Custom CSS“.

Wir fügen also unsere bereits bekannten Zeilen in das Textfeld von Simple Custom CSS ein und drücken auf „Aktualisieren“. Wenn wir unsere Seite neu laden, dann sollten die Schriften korrekt mit unseren Webfonts dargestellt werden.

 

Ein Test zum Abschluss im Browser und schon ist die Sachse erledigt.

Alternativ bieten einige Themes auch die Möglichkeit an CSS Regeln einzubinden. Da diese Funktion aber von Theme zu Theme verschieden ist, möchte ich in diesem Artikel nicht näher darauf eingehen.

 

Zusammenfassung

Wenn du die 4 Schritte abgearbeitet hast, dann hast du jetzt eine DSGVO konforme Einbindung und mitunter auch Performance Vorteile.

Zum Schluss noch einmal die 4 Schritte:

Schritt 1: Google Fonts herunterladen

Schritt 2: Google Fonts auf den eigenen Server übertragen

Schritt 3: Laden von Google Fonts vom Google Server unterbinden

Schritt 4: Google Fonts in CSS einbinden

Ich würde mich freuen, wenn du mir in den Kommentaren mitteilst, ob die Umstellung bei dir geklappt hat.

Viel Erfolg

Andreas