DSGVO – Google Fonts im WordPressblog lokal speichern

Die DSGVO ist in allem Munde und einige können das Wort mit den 5 Buchstaben nicht mehr hören. Allerding kommt man um das Thema nicht mehr herum, denn nicht nur Unternehmen müssen sich mit der DSGVO beschäftigen, sondern auch jeder private Webseitenbetreiber. Somit betrifft dies auch Blogs.

Ich bin in letzter Zeit oft gefragt wurden, was man alles beachten muss, um seinen eigenen Blog so abzusichern, dass dieser der DSGVO entspricht. Ich möchte nun mit einigen Beiträgen eine Anleitung an die Hand geben, wie man die technische Umsetzung einiger dieser Anforderungen bewältigt.

Hinweis: Ich bin IT-ler und kein Jurist. Ich werde einen Teufel tun in meinem Artikel einen rechtlichen Bezug auf die DSGVO vorzunehmen. Ob Sie die Umsetzung ebenfalls durchführen, bleibt Ihnen überlassen. Ich nehme auch keine Verantwortung für den Datenverlust. Sorgen Sie dafür, dass Sie ein Backup Ihrer Systeme angelegt haben, bevor Sie die Anleitung befolgen. Wenn Sie Fragen bzgl. Der Gesetzgebung und Richtigkeit haben, so ziehen Sie bitte einen Datenschützer oder einen Juristen zu rate.

Das Problem mit den Google-Fonts

Was sind eigentlich Google-Fonts. Jede Website nutzt zur Darstellung einer Schriftart (z.B. Courier New in Word) eine Schriftdatei. Dadurch weiß der Browser (z.B. Internet Explorer) welche Schrift Ihre Website hat und stellt diese dann dem Betrachter zur Verfügung. Nun gibt es Schriftarten, die von der Firma Google erstellt wurden und als Standardschriftart in manchen Templates von WordPress.org genutzt werden. Hierbei handelt es sich um die genannten Google-Fonts.

Die Schriftarten (Dateien) liegen aber nicht auf Ihren Server, sondern werden von einem sogenannten Request-Server abgerufen. Dieser Server steht aber nicht in Europa, sondern in der USA. Sollte ein User nun Ihre Seite aufrufen, werden die Schriftarten von dem Server abgerufen und hierbei wird dann Ihre IP-Adresse übermittelt. Genau hier ist der Hund begraben. Die IP-Adresse zählt nämlich zu den personenbezogenen Daten. In einigen Artikeln ist zu lesen, dass einige Landesschutzbeauftragte empfehlen, die Fonts lokal zu speichern, da dies der sicherste Weg ist. Andere Artikel sagen wiederum, dass es ausreicht die Nutzung der Fonts in den jeweiligen Datenschutzbestimmungen zu berücksichtigen. Ich habe mich dazu entschlossen, die Google-Fonts lokal auf meinem Server zu speichern.

Hinweis: In diesem Beispiel arbeite ich mit dem Chrom-Browser, da mit diesem die Analyse des Blogs relativ einfach umzusetzen ist. Mehr Information über den Browser findet Ihr unter dem folgenden Link auf der Google-Seite. https://www.google.de/chrome/

Analyse des Blogs

Als erstes prüfen wir, ob das eingesetzte Theme (Vorlage) des WordPress-Blogs die Google-Fonts nutzt. Wechseln Sie hierzu auf Ihren Blog. Gehen Sie mit der Maus auf eine Schrift und klicken Sie die rechte Maustaste. Wählen Sie im Kontextmenü die Option „Untersuchen“.

Auf der rechten Seite öffnet sich nun eine Art Editor. Klicken Sie hier im oberen Bereich auf die Registerkarte „Sources“. In meinem Beispiel werden nun alle externen Quellen angezeigt, die von meinem Blog abgerufen werden. Bei Muurejubbel handelt es sich um meine Domäne. Bei den zwei Einträgen „fonts.googleapis.com“ und „fonts.gstatic.com“ aber nicht. Hierbei handelt es sich um die Google-Fonts. Da Google eine Menge an Schriftarten vorhält, brauchen wir den Namen der Schriftart. Klicken Sie hierzu auf den kleinen Pfeil neben der Wolke. Ihnen wird nun die geladene Schriftart angezeigt. Hinter dem „=“ Zeichen verbirgt sich der Name „NotoSans“.

Aufgrund der Vielzahl an Google-Fonts macht es keinen Sinn, alle herunterzuladen und auf den Server zu kopieren. Aus dem Grund laden wir nur die benötigten Fonts herunter. Hierzu gibt es im Internet die Seite “Google-Webfonts-Helper”. Geben Sie im Suchfeld in der oberen linken Ecke die benötigte Fontart ein. In meinem Beispiel Noto. Unterhalb des Suchfeldes werden Ihnen die verfügbaren Schriftarten angezeigt. Da ich die „sans-serif“ benötige, klicke ich auf die Schriftart.

Früher war es so, dass die zu verwendenden Schriftarten im HTML-Code selber formatiert wurden. Seit der Integration der CSS-Technologie wird das Layout einer Website in einer separaten CSS-Datei gepflegt. Später müssen wird diese CSS-Datei bearbeiten und die neue Schriftart mit dem Pfad auf Ihrem lokalen Server angeben. Damit wir nicht anfangen müssen zu skripten, gibt die Website uns den zu verwendenden Code. Scrollen Sie bis zu dem Bereich „Copy CSS“ und kopieren Sie den Code in einen TXT-Editor.

Im nächsten Schritt laden Sie die Schriftart auf Ihren Rechner herunter. Scrollen Sie hierzu bis zum Bereich „Download files:“ und klicken Sie auf den angezeigten Button. Speichern Sie die Datei auf Ihrem Rechner.

Entpacken Sie die Datei auf Ihren Rechner. Wenn Sie nun in die Datei gucken, können Sie die Google-Fonts Dateien einsehen.

Nun benötigen Sie ein (S)FTP-Programm, um eine Verbindung mit Ihrem Server herzustellen. In meinem Fall benutze ich Filezilla und mein Hoster ist 1und1. Wie Sie eine FTP-Verbindung mit Ihrem Anbieter herstellen, erfahren Sie meistens in den entsprechenden Portalen. Stellen Sie eine Verbindung mit Server her.

Kopieren Sie die Fonts-Dateien in den Ordner Fonts. Unter der Verwendung von WordPress finden Sie diesen unter „wp-includes -> fonts“

Hinweis: „../fonts“ ist das Standardverzeichnis. Sollten Sie hier ein anderes Verzeichnis nehmen, müssen Sie später in der CSS-Datei den Pfad zum neuen Fonts-Odner anpassen.

Nachdem Sie die Fonts hochgeladen haben, kontrollieren Sie ob Sie diese in dem Ordner finden können.

Anpassen der CSS-Datei

Passen wir nun die CSS-Datei an damit die Schriftarten auf lokal abgerufen werden. Öffnen Sie innerhalb des (S)FTP-Client den Pfad „wp-content -> themes -> IhrTheme“.

Scrollen Sie ganz nach unten und kopieren Sie die Datei „style.css“ auf den Rechner.

Wechseln Sie nun in das lokale Verzeichnis, indem Sie die Datei kopiert haben. Markieren Sie dann die Datei mit der Maus und betätigen Sie die rechte Maustaste. Wählen Sie im Kontext Menü die Option „Edit withe Notepade+. Sollten Sie Notepade+ nicht auf Ihrem Rechner installiert haben, so wählen Sie Ihren entsprechenden Text-Editor aus.

Scrolle Sie ganz an das Ende der Datei. Achten Sie darauf, dass Sie am Ende der Datei die geschweifte Klammer nicht löschen. Fügen Sie nun den im oberen Teil kopierten CSS-Code von der Website ein.

Hinweis: Wie oben schon einmal erwähnt, ist „../fonts/“ das Standardverzeichnis indem nachgeschaut wird, ob sich die entsprechende Schriftart darin befindet. Solltet Sie oben eine andere Order für die Fonts gewählt haben, so müssen Sie hier den Pfad ändern.

Installation Plugin Disable Google Fonts

Sie sind nun bereit, die Verbindung mit den Google-Servern zu trennen. Das geht relativ einfach. Hierzu benötigen wir das Plugin „Disable Google Fonts. Um das Plugin zu installieren, gehen Sie wie folgt vor.

Melden Sie sich am Admin-Center Ihrer Seite an. Klicke dann auf Plugin und wähle dann im Kontextmenü die Option „Installieren“.

Geben Sie rechts in der oberen Ecke im Suchfeld den Namen „Disable Google Fonts“ ein. Das Plugin wird gesucht und nach einer kurzen Zeit wird Ihnen das Suchergebnis angezeigt. Klicken Sie bei dem Plugin „Disable Google Fonts“ auf „Jetzt installieren“.

Nach der Installation müssen wir nun das Plugin aktivieren. Klicken Sie hierzu auf „Aktivieren“. Herzlichen Glückwunsch die Verbindung zu den Google-Servern wurde unterbrochen.

Achtung: „Aus Sicherheitsgründen sollten Sie unbedingt ein Backup von der CSS machen. Da wir nun von unserem Rechner die geänderte CSS-Datei wieder auf den Web-Server kopieren, reicht es hier aus, die Dateiendung auf dem Server in „_back“ zu ändern.

Jetzt müssen wir nur noch die CSS-Datei, die von uns modifiziert wurde, auf den Webserver kopieren. Wechseln Sie hierzu in der lokalen Order in der Sie die CSS-Datei gespeichert haben. Kopieren Sie jetzt die style.css auf den Webserver.

Das sollte es gewesen sein. Überprüfen Sie das Ergebnis. Wiederholen Sie hierzu die oben beschriebenen Schritte im Browser. Wie Sie sehen, werden die Fonts nicht mehr von den Google-Servern abgerufen.