Tipps für Google Fonts

Lumelab-Blog-Google-Fonts

Hurra, am 25. Mai 2018 tritt die Datenschutzgrundverordnung, kurz DSGVO, in Kraft. Das heißt, auch für private Webseiten gibt es einiges zu beachten.

Checkt aufjedenfall meine anderen Blogartikel ab: Google Analytics DSGVO konform einbauen, WordPress Kontaktformular und Kommentarfunktion DSGVO konform einbauen.

Wichtig: Diesen Artikel habe ich im April 2018 geschrieben, es kann also sein, dass der Artikel nicht mehr aktuell ist wenn Ihr ihn lest. Ich versuche natürlich Updates hier zu aktualisieren.

#0 Erklärung

Wenn dein WordPress Theme Google Fonts benutzt, dann wird bei jedem Seitenaufruf der Google Server kontaktiert. Somit werden auch Daten an Google übertragen. Ein solches übertragen von Daten ist natürlich nicht wirklich im Sinne der Datenschutzgrundverordnung.

Ich habe viel im Internet recherchiert und viele interessante Thesen gefunden. In einem sind sich aber alle einig und auch ich bin der Meinung, dass Google bereits an einer Lösung arbeitet die es weiterhin erlaubt, Google Fonts ganz normal einzubinden ohne Probleme.

Abgesehen aber vom Datenschutz, dauert diese externe Abfrage natürlich auch einige Zeit die sich auf die insgesamte Ladezeit der Website addiert. Somit hat es auch einen Vorteil die Google Fonts vom eigenen Server zu laden. Wie das Ganze funktioniert findet Ihr hier im Artikel.

#1 Schriften finden und downloaden

Als ersten Schritt benötigen wir natürlich die Schrift. Wenn Ihr die passende gefunden habt, merkt euch den Namen und nutzt das folgende Tool -> den Google Webfonts Helper.

Hier könnt ihr oben links im Suchfeld den Namen der Schrift eingeben und auf die richtige Schrift klicken.

Bei Punkt 2 könnt ihr dann die Schriftschnitte auswählen die ihr verwenden wollt.

Als letzten Schritt klickt ihr unten auf den Download-Button und speichert die Schriften.

Wichtig: Unter Punkt 3 findet ihr einen CSS Code den Ihr später noch benötigt. Am besten kopiert ihr euch diesen gleich in den Zwischenspeicher.

#2 Schriften am Server hochladen

Die heruntergeladene .zip Datei gleich mal entpacken. Nicht erschrecken, darin befinden sich einige Dateien die die Schriftschnitte und Schriftstärken definieren die Ihr vorher ausgewählt habt.

Next Step ist dann das Hochladen. Verbindet euch also per FTP mit eurem Server wo die WordPress Webseite liegt.

Am besten erstellt ihr gleich im root Verzeichnis, in dem sich auch „wp-content und „wp-includes“ befindet, einen neuen Ordner mit dem Namen „fonts“.

Wichtig: Nennt euren Ordner unbedingt „fonts“ sonst werden die Schriften nicht gefunden. Im CSS wird nämlich auf genau diesen Ordner verlinkt. Natürlich könnt ihr den Ordner anders benennen, bedenkt dies aber und ändert die Verlinkung auch im CSS, welches ich im nächsten Schritt erkläre.

Ladet dann den Inhalt des entpackten .zip Files in diesen erstellten Ordner.

Tipp: Schließt die Verbindung noch nicht. Wir brauchen sie gleich nochmal.

#3 Schriften per CSS einbauen

So, die Schrift ist schonmal erfolgreich am Server. Als nächsten Schritt müssen wir WordPress noch mitteilen wo er diese Schriften findet.

Navigiere übers FTP Programm in den Ordner wo dein Theme oder dein Child-Theme liegt.

Normalerweise hier: „wp-content“ -> „themes“ -> „dein Theme“

Dort findest du die Datei „style.css“ die wir jetzt brauchen. Lokal kopieren und gleich mit dem geeigneten Programm wie zum Beispiel Sublime Text 2 öffnen.

Fügt nun den CSS-Code im Zwischenspeicher gleich am Anfang unter die grauen Zeilen in das CSS-File ein.

Sollte sich der Code nicht mehr im Zwischenspeicher befinden, geht zurück zum Webfonts helper und kopiert den Code nocheinmal neu.

Nach dem hinzufügen des Codes, könnt ihr die CSS Datei wieder auf den Server laden und das FTP-Programm schließen.

#4 Google Server Anfrage blockieren

Euer Theme wird weiterhin die Anfrage an Google schicken, da dies so hinterlegt ist. Das folgende Plugin könnt ihr herunterladen und installieren um diese Anfrage zu blockieren.

„Remove Google Fonts References“ ist ein kleines Plugin welches die Anfrage blockiert. Das praktische ist, dass es keine Einstellungen gibt. Ihr müsst es nur installieren und aktivieren, danach wird die Anfrage geblockt.

Leider ist das Plugin schon lange nicht mehr aktualisiert worden, ich habe derzeit noch kein anderes Plugin mit der selben Funktion gefunden. Da es keine Sicherheitslücken aufweist, könnt ihr es aber ohne Bedenken nutzen.

#5 Check

Super, mit dem Installieren des Plugins sollte es nun keine Verbindung mehr zu Google geben und ihr seit DSGVO konform unterwegs 🙂

Natürlich gibt es einen kleinen Check wie ihr sehen könnt ob es geklappt hat.

Geht dazu im Chrome Browser oder im Firefox Browser auf Rechtsklick > Untersuchen. Dann in den Reiter „Sources“ und hier findet ihr links eine Liste. Sind in der Liste NICHT mehr die Hinweise zu „fonts.googleapis.com“ und „fonts.gstatic.com“ dann hat alles geklappt und die Schriften werden von eurem Server geladen.

Hier ein Screenshot wie es ausschaut wenn Google Fonts noch normal eingebaut sind:

Google-Fonts-Lumelab-Check

 

#6 Schlussworte

Ich hoffe die Schritte sind verständlich und ihr könnt alles super nachmachen.
Wie immer freue ich mich natürlich über Kommentare. Danke.

-Stefan

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen