Inhaltsverzeichnis
Einleitung
Derzeit brodelt es in Österreich dank fragwürdiger Briefe die derzeit von einem Anwalt aus Niederösterreich verschickt werden. Grund für die Aufregung sind die sogenannten Google Fonts, also Schriftarten die über Google Server geladen werden. Eine Bewertung dieser Vorgänge und den technischen Unsinn dahinter erspare ich euch an dieser Stelle. Dieser Beitrag soll sich also nicht um das aktuelle Thema an sich drehen, sondern um die technischen Möglichkeiten die man als betroffener hat. Vorweg, die Allgemeine Empfehlung auch von der WKO ist derzeit, dass man die Google Fonts lokal einbindet. Das ist schnell gesagt, aber wie genau geht man da jetzt vor?
Hilfe erhalten
Info: Der nachfolgende Artikel geht davon aus, dass du grundlegende Erfahrung mit der Entwicklung und Wartung deiner Website hast. Solltest du Hilfe bei der Umstellung auf lokale Google Fonts benötigen, kannst du dich gerne bei mir melden. Nach kurzem Blick auf die Sachlage können wir uns gerne eine pauschale für die Umstellung ausmachen. Der Aufwand für die Umstellung auf lokale Google Fonts variiert stark und ist manchmal, z.B. wenn ältere Homepage-Baukästen von Hostern genutzt wurden technisch gar nicht ohne weiteres möglich. Aktuell habe ich auch schon einige Fälle bei denen Hoster kurzerhand die betroffenen Homepage-Baukästen deaktiviert haben. Das Thema hat gerade also viel Dynamik.
Bevor Ihr mit den Arbeiten startet könnt Ihr je nachdem welches System Ihr für eure Website verwendet böse Suchmaschinen anwerfen um herauszufinden ob es vielleicht bereits fertige Lösungen oder Einstellungsmöglichkeiten gibt, die das laden von Google Fonts unterbinden. Die nachfolgende Anleitung ist eine Allgemeine Vorgehensweise, zu sehr kann ich leider nicht ins Detail gehen, da das den Rahmen eines Blog-Eintrags komplett sprengen würde. Es gibt einfach zu viele Systeme Programmiersprachen und Arten an Websites um wirklich alles abzudecken. Das Know-How hinter den jeweiligen Schritten variiert auch stark, trotzdem hoffe ich, dass dieser Beitrag dem ein oder anderen weiterhilft.
Erstellt immer ein Backup eurer Website bevor Ihr Änderungen daran vornehmt.
Nutzt meine Website Google Fonts die von Google Servern geladen werden?
Im ersten Schritt sollte man herausfinden wo auf der eigenen Seite Google Fonts eingebunden werden. Dazu kontrollieren wir zuerst, ob der Browser diese herunterlädt. Öffnet dazu z.B. Firefox, navigiert auf eure Seite und drückt dann die Taste „F12“. Jetzt sollten sich die Entwicklertools auf der rechten Seite eures Schirms öffnen. Auf den ersten Blick sieht das alles recht überwältigend aus, aber keine Angst.
Wir interessieren uns für den Punkt „Netzwerkanalyse“, klickt auf diesen Reiter und aktualisiert anschließend eure Seite. Jetzt sollte sich die Liste mit Einträgen füllen. Diese Einträge sind zusätzliche Inhalte die über eure Seite geladen werden, also praktisch alle Dateien die der Browser herunterlädt um die Seite anzuzeigen. Uns interessieren externe Inhalte deswegen klicken wir mit der rechten Maustaste auf die Leiste mit den Reitern (also: Status, Methode, etc.) mit der rechten Maustaste und wählen anschließend den Punkts „Host“ an. Jetzt sollte die jeweilige Domain angezeigt werden von den Inhalte geladen werden. Hier interessieren uns die folgenden Adressen im Bezug auf Google Fonts:
- googleapis.com
- gstatic.com
- gibt es weitere sucht am besten auch nach „google“ im Allgemeinen
Im oberen Screenshot den ich zum Schutz der betroffenen Seite geschwärzt habe sieht man, dass hier direkt über zweiverschiedene Arten Google Fonts geladen werden. Damit ladet eure Seite Schriftarten, also Google Fonts von Google-Servern. Das müssen wir jetzt also ändern.
Wenn Ihr in der Netzwerkanalyse keine Verweise auf Google findet, könnte es sein, dass Ihr keine Google Fonts verwendet bzw. dass diese bereits lokal geladen werden .Sucht diesbezüglich am besten nach Stichwörtern wie „font“ oder „woff“. Findet Ihr diesbezüglich Einträge mit einem Host der gleich eurer Domain ist, sollte die Schriftart lokal geladen werden.
Alternative:
Ihr könnt auch den Service von sicher3.de nutzen, über diesen lässt sich auch testen ob Ihr Google Fonts nutzt, die Seite ist aber leider extrem überfordert aufgrund der vielen Anfragen. Das sollte sich aber hoffentlich in den kommenden Tagen auch etwas entspannen.
Google Fonts im Quellcode finden
Jetzt geht es darum herauszufinden wo genau die Google Fonts geladen werden. Dafür gehen wir in den „Developer Tools“ also dem Bereich im Browser den wir gerade für die Netzwerkanalyse genutzt haben auf den Punkt „Inspektor“. Hier findet Ihr ganz oben ein Suchfeld:
Gebt in diesem Suchfeld z.B. „fonts“ ein und bestätigt mit der Eingabetaste. Jetzt sollte euer Browser Zeilen markieren in denen passende Einträge dazu geladen werden.
Wenn Ihr Einträge ähnlich wie auf dem Bild gefunden habt, könnt Ihr zur nächsten Überschrift springen. Falls nicht, werden eure Fonts möglicherweise über eine sogenannte CSS Datei nachgeladen. Dadurch wird es schwieriger herauszufinden an welcher Stelle die Font geladen wird. Ihr müsst praktisch alle CSS Dateien und den Quellcode nach Links wie „fonts.gstatic“ oder „googleapis“ durchsuchen. In .CSS Dateien könnt Ihr auch nach Text wie „src:url“ suchen, über dieses Kommando werden die Schriftarten nämlich höchstwahrscheinlich in diesem Fall bei euch geladen.
Noch eine kurze Erklärung zu dem Eintrag „<link rel=“dns-prefetch““, über diesen wird der Browser des Besuchers aufgefordert die IP Adresse der angegebenen Domain aufzulösen. Der Browser des Besuchers bzw. das Betriebssystem fragen dadurch beim jeweiligen DNS die IP an. Löscht diesen Eintrag auch direkt.
Google Fonts von Website löschen
Jetzt geht es darum zu versuchen die Google Fonts zu deaktivieren bzw. aus dem Quellcode zu löschen. Hier sind wir auch beim komplexesten Probleme speziell im Hinblick auf eine geradlinige Anleitung. Je nachdem welches System Ihr für eure Website nutzt muss an unterschiedlichen Stellen gesucht werden. Nutzt Ihr kein CMS sondern z.B. klassisches HTML müsst Ihr höchstwahrscheinlich jede HTML Datei eurer Website öffnen und die passenden Einträge entfernen. Nutzt eure Seite PHP gibt es wahrscheinlich eine zentrale Datei die vielleicht header.php heißt in der die Verlinkung zu Google zu finden ist.
Ein möglicher Ansatz für die Suche wäre, dass Ihr euch eure komplette Website lokal herunterladet um diese dann mit einer Volltextsuche zu durchsuchen. Für solche Fälle bietet sich z.B. einen Klassiker wie der Total Commander an. In dieser Volltextsuche könnt Ihr z.B. nach „gstatic“ oder einfach nur „fonts“ suchen, anschließend sollten euch die betroffenen Files ausgegeben werden.
Natürlich kann es passieren, dass Ihr trotz all dieser Tipps weiterhin Google Fonts auf eurer Website habt. Ich habe in den letzten Tagen bereits einiges gesehen, einmal waren Google Fonts sogar über die Datenbank eingebunden, also ein Textfeld in der Datenbank hatte die Verlinkung zu Google gespeichert und wurde dann an der passenden Stelle ausgegeben. Es gibt leider viele, teilweise verrückte CMS-Systeme die alle andere Herangehensweisen verfolgen. Wie bereits angesprochen biete ich auch Hilfe bei diesem Thema an und kann mich um die Entfernung der Google Fonts kümmern.
WordPress: Google Fonts deaktivieren
Wenn Ihr WordPress nutzt könnt Ihr z.B. das Plugin OMGF nutzen. Dieses bindet automatisch die Google Fonts lokal ein und deaktiviert bestehende Verlinkungen. Nach der Aktivierung und Konfiguration des Plugins müsst Ihr wie vorher beschrieben Testen ob wirklich keine Google Fonts mehr geladen werden. Das Plugin bietet nicht die Funktion, Google Fonts zu deaktivieren, wenn diese über CSS Dateien geladen werden. OMGF ist also auch keine „set and forget“ Lösung!
Google Fonts herunterladen
Jetzt geht es darum, dass wir die Schriftarten lokal einbinden. Damit wir das tun können müssen wir die Schriftarten zuerst herunterladen.
Wechselt wieder in die Karteikarte „Netzwerkanalyse“ und schaut euch die Adresse an über die eure Google Fonts geladen werden. In dieser Adresse finden Sich die Namen der jeweiligen Fonts.
Im Screenshot seht Ihr, dass z.B. die Font „Open Sans“ in der Schriftstärke 400, 300, 300 italic, 400 italic, 600 usw. geladen werden. Damit eure Website nach dem löschen der Google Fonts Verlinkung eure Schriften weiterhin wie gewohnt anzeigt müsst Ihr all diese Schriften direkt herunterladen und lokal einbinden.
Wir nutzen dazu die Seite Google Fonts Helper
Auf dieser Seite könnt Ihr die passenden Fonts markieren und herunterladen. Hier ein Beispiel anhand von Open Sans.
Hier eine kurze Erklärung was hier gemacht werden muss.
- Hier aktiviert Ihr die genutzten Variationen der Schriftart
- Das ist der CSS Code den Ihr auf eurer Website veröffentlichen müsst. Achtet hier auf die Verweise auf die Schriftart-Dateien, der Pfad dazu muss später passen.
- Der gebündelte Download aller Schriftarten die Ihr auf euren Webserver hochladen müsst
Alle Angaben in dieser Anleitung sind natürlich ohne Gewehr.
Intro Image by Stefan Schweihofer from Pixabay
