Google Webfonts sind eine günstige Möglichkeit, der eigenen Website eine attraktive Optik zu verpassen. Leider sind diese Webschriften nicht kompatibel mit der DSGVO. Wer teure Abmahnungen umgehen will, bindet sie lokal auf dem Server ein. Wie das funktioniert, erfahren Sie hier.
Warum überhaupt Webfonts? Web Fonts helfen uns, zu definieren, wie ein Besucher unsere Website sieht. Unabhängig von den Schriften, die er auf seinem Computer oder Smarthphone installiert hat, denn die Fonts werden gemeinsam mit der Website ausgeliefert.
Das ist ein großer Fortschritt gegenüber den Anfängen des Internets, als man mit den Schriften leben musste, die die meisten User auf dem PC installiert hatten. Deshalb basierten damals praktisch alle Webdesigns auf Schriften wie Arial, Verdana oder Times.
Auch heute noch kann man Websites so erstellen, dass man dem Nutzer die Wahl lässt, in welcher Schriftart er die Webseiten betrachtet. Vorteil dieses Vorgehens sind die unschlagbar kurzen Ladezeiten. Nachteil ist, dass wir nicht definieren können, wie die Website aussieht. Weil das Design einer Website aber mit entscheidend für deren Erfolg ist, haben sich die Webfonts durchsetzen können.
Meist werden Google Fonts eingesetzt, da sie einfach nutzbar und scheinbar kostenlos sind. Allerdings bezahlt man dennoch – mit seinen Daten und den Daten der Websitebesucher.
Bereits beim Laden einer Seite werden Daten des Nutzers an Google-Server übertragen – ohne dass dieser eine Chance hat, der Übertragung zu widersprechen. Das ist ein klarer Verstoß gegen die DSGVO, es gibt viele Abmahnungen gegen ahnungslose Website-Betreiber. Das muss nicht sein: In diesem Artikel werde ich zeigen, wie Google Fonts so eingesetzt werden, dass sie konform mit der Datenschutz-Grundverordnung sind.
Da ich Texter bin und kein Anwalt, kann und will ich hier keine Rechtsberatung geben. Ich gebe lediglich meine Erfahrungen aus meiner täglichen Praxis wieder.
Google Fonts einbinden – der bequeme Weg, der gegen die DSGVO verstößt
Google Fonts sind ein kostenloses Angebot von Webschriften, die auf der Website von Google Fonts angeboten werden. Webdesigner können hier Schriften aussuchen und dann durch Klick auswählen. Nach der Auswahl erhält man als Download ein Paket, das die gewählten Schriften enthält und einen Code, der auf der Website eingebunden werden soll.
Google Fonts bitte nicht über diesen Code einbinden, es wird sonst gegen die DSGVO verstoßen.
Da die meisten von uns keine Webdesigner sind, ersparen uns viele WordPress-Themes den Umweg über den Besuch der Google-Website, die Fonts können einfach im Theme aus einer Liste ausgewählt werden. Auch hierbei wird der Code von Google verwendet, das Ergebnis ist ebenfalls ein Verstoß gegen die DSGVO.
Das Problem, wenn Google Fonts klassisch extern vom Google-Server geladen werden
Was passiert, wenn Google Fonts über den Google-Code auf Ihren Webseiten eingesetzt werden? Bei jedem Aufruf einer Webseite werden dann die benötigten Webschriften von externen Servern in den USA geladen. Dabei werden Nutzerdaten übertragen – nur deshalb ist Google überhaupt so freundlich, uns diese Schriften als Free Fonts kostenlos zur Verfügung zu stellen. Über das Aufzeichnen der Nutzerdaten kann Google ausführliche Profile über das Surfverhalten von Nutzern erstellen. Denn Google Fonts finden sich auf sehr vielen Websites, man hinterlässt also fast überall ungewollt seine Spuren. Nicht nur nach der Datenschutzgrundverordnung DSGVO ist das ein Problem.
Auch die Ladezeiten Ihres Internetauftritts können unter dieser Form der Schriftenauslieferung leiden. Denn die Schriften kommen von einem externen Server, der aktiviert werden muss und dann die Daten ausliefert. Google hat hier zwar alles optimiert, in der Praxis gibt es aber doch immer mal wieder kurze Hänger und Verzögerungen.
Auch wenn Sie Schriften nicht selbst installiert haben, sondern Ihnen beispielsweise Ihr WordPress-Template eine simple Einrichtung von Google Fonts anbietet oder Sie ein Plugin nutzen, können Sie davon ausgehen, dass die Umsetzung nicht mit der DSGVO konform ist.
So können Sie Ihre Website auf Google Fonts prüfen
Der einfache Test darauf, ob bei Ihnen Google Fonts verwendet werden, erfolgt über solch einen Font-Checker.
Leider geben diese Check-Tools nicht viele Informationen raus, sagen nur, ob es Probleme gibt.
Wer mehr Details möchte, öffnet eine Webseite in der Quelltext-Ansicht. Beim Chrome-Browser versteckt sich diese unter „Anzeigen“ -> „Entwickler“ -> „Quelltext anzeigen“. Auf Firefox: „Extras“ -> „Web-Entwickler“ -> „Seitenquelltext anzeigen“. Auf Safari: „Entwickler“ -> „Seitenquelltext einblenden“.
Den Quelltext durchsuchen Sie nun nach dem Begriff „google“ bzw. „gstatic“ oder konkreter „fonts.googleapis.com“ oder „fonts.gstatic.com“. Wenn Sie dabei auf diesen oder einen ähnlichen Text stoßen, in dem der Begriff fonts vorkommt, dann nutzen Sie wahrscheinlich diese nicht empfehlenswerte Form der Fontseinbindung.
Ein anderer Weg, die verwendeten Schriftarten zu analysieren, geht über den Chrome Browser. Sie öffnen eine Seite und wählen dann „Anzeigen“ -> „Entwickler“ -> „Elemente untersuchen“. Anschließend klicken Sie rechts auf den Reiter „Sources“ und etwas weiter unten auf „Page“. Achten Sie in der Liste auf den Begriff „fonts“ und öffnen Sie die entsprechenden Verzeichnisse durch Klick auf das Dreieck. In dem anonymisierten Beispiel werden gleich zwei Formen der Einbindung von drei Webfonts (Lato, Quicksand und Raleway) über Google-Server genutzt.
Ganz wichtig: Es kann sein, dass auf verschiedenen Seiten der Website verschiedene Schriften geladen werden. Man sollte deshalb immer alle Unterseiten testen. Kritisch sind dabei gern Seiten, auf denen externer Code geladen wird, z.B. durch eingebundene Youtube-Videos, Kalenderservices, Google-Maps und ähnliches. Wobei man solche externen Inhalte sowieso so einrichten sollte, dass der Besucher das Laden erst freigeben muss – aber das ist ein Thema, das uns hier jetzt nicht interessieren soll.
Wie setzen Sie Webfonts so ein, dass Sie die Anforderungen der DSGVO erfüllen?
Die Lösung besteht darin, die Webschriften lokal zu installieren, also auf einem eigenem Server zu speichern. Das geht natürlich auch beim Shared Hosting – wenn Ihr Server also nicht Ihr eigener ist, sondern bei einem Hosting-Provider steht, dessen Serverstandort konform zur DSGVO ist. Beispielsweise webgo (–> 5-Euro-Gutscheincode für alle WEBGO-Tarife: speedplus) oder ALL-INKL.
Es gibt für WordPress Plugins, die das lokale Installieren von Google-Fonts erledigen. Nachteil von Plugins: Was passiert, wenn diese ausfallen? Zum Beispiel weil es Kompatibilitätsprobleme mit neuen WordPress-Versionen gibt?
Ich bevorzuge deshalb die Einrichtung des lokalen Hostings mit Bordmitteln, die deutlich ausfallsicherer sind.
Und das sind die nötigen Schritte für diese empfohlene Einbindung von Webschriften:
Sie gehen auf die Website Google Webfonts Helper.
Die ist nicht ganz so schick und komfortabel zum Ausprobieren von Schrifarten wie die von Google, Sie sollten also schon ausgesucht haben, welche Webfonts Sie auf Ihrer Website nutzen möchten.
Wir nehmen einfach mal den weit verbreiteten Font Open Sans.
Etwas weiter unten finden Sie den CSS-Code, über den Sie die Schriften auf Ihren Webseiten lokal einbinden.
Folder-Prefix passe ich hier an, damit die Pfadangaben zur weiter unten beschriebenen Einbindung passen.
Durch Klick auf den Download-Button bekommen Sie das ganze Schriftpaket als Zip-Datei.
Google Webfonts auf den Server hochladen
Die Schriftfamilien aus der eben geladenen Zip-Datei werden im nächsten Schritt auf Ihren Server geladen. Dazu benötigen Sie ein FTP-Programm oder Sie nutzen den Web-FTP-Zugang Ihres Hosters.
Da für mich Webschriften bei einer WordPress-Installation Bestandteil des jeweiligen Themes sind, organisiere ich Schriften so wie gleich beschrieben. Falls Sie nicht WordPress nutzen, können Sie Ihren Fonts-Ordner auch an anderer Stelle unterbringen. Wichtig ist immer nur, dass im CSS die Pfadangaben zu den Schriftdateien passen. Sonst werden die Schriften später nicht gefunden und durch meist nicht so schöne Ersatzschriften ersetzt.
Da ich unter WordPress immer mit Child-Themes arbeite, richte ich im Verzeichnis des Child-Themes einen Ordner mit dem Namen „fonts“ ein. In diesen Ordner kommen die ganzen Schriften, die Sie eben heruntergeladen haben. Eine Verzeichnisebene darüber (auf Ebene des Ordners „fonts“) findet sich meist eine Datei mit dem Namen style.css. In diese kopieren Sie den CSS-Code, den Sie vom Google Webfonts Helper erhielten. Wenn es style.css bei Ihnen nicht gibt oder diese durch das Theme nicht geladen wird, können Sie jede andere CSS-Datei im Child-Ordner verwenden, die frühzeitig beim Aufruf der Website geladen wird. Welche das sind, sehen Sie im Quelltext Ihrer Website.
Und damit sind Sie dann auch schon fast fertig. Im nächsten Schritt entfernen wir noch die bisherigen Aufrufe des Google Schriftservers.
Externe Aufrufe von Google-Fonts entfernen
Auch mit der beschriebenen lokalen Einbindung der Schriften werden trotzdem noch die externen Google-Fonts geladen. Das stellen wir jetzt ab.
Manche WordPress-Themes bieten in den Einstellungen an, Google-Fonts zu deaktivieren. Nerds nutzen dazu Code in der Datei functions.php oder greifen direkt in Theme-Dateien ein.
Vorteil dieses Vorgehens ist, dass es sicherer ist, als sich auf ein zusätzliches Plugin zu verlassen, das womöglich eines Tages unbemerkt den Dienst einstellt.
Wer sich dennoch nicht so viel Stress machen möchte, setzt auf WordPress einfach das Plugin „Disable and remove Google-Fonts“ ein. Das arbeitet nach meiner Erfahrung sehr sauber und effizient. Aber man sollte dann immer mal wieder checken, ob das Plugin noch seine Arbeit macht. Denn wenn das mal ausfallen sollte, ist die Website sofort wieder abmahngefährdet.
Testen, ob jetzt alles sauber ist
Um zu testen, ob alles geklappt hat, löschen Sie den Browsercache und laden Sie Ihre Website neu. Wenn jetzt Schriftfamilien fehlen, sind meist Fehler in den Pfadangaben zu den Schriftdateien oder Sie haben vergessen, die Schriften auf den Server hochzuladen.
Anschließend führen Sie den weiter oben beschriebenen Test auf extern geladene Google-Schriften noch einmal durch.
Bitte daran denken, dass das Laden von Schriften auf jeder Unterseite separat geregelt sein kann, also alle verdächtigen Unterseiten testen.
Der unkomplizierteste Weg, um Google Fonts legal einzubinden
Wenn Sie trotz der Nachteile lieber ein Plugin verwenden, um auf Ihrer WordPress-Website Google Fonts einzubinden, dann empfehle ich das WordPress Plugin OMGF Pro.
Es erledigt die ganzen nötigen Schritte: Das Plugin erkennt, welche Google Fonts derzeit auf Ihrer Website genutzt werden. Alle benutzten Fonts werden dann so auf Ihrem Server gespeichert, dass die Nutzung konform zur DSGVO ist. Und alle nicht legalen Aufrufe der Google-Fonts-Server werden unterbunden. Einfacher geht es nicht.
Vorsicht: Wenn Sie absolut sicher sein wollen, nutzen Sie nicht die kostenlose Version des Plugins. Denn nur die Pro-Version erkennt zuverlässig alle externen Google-Fonts, auch solche, die beispielsweise von Plugins nachgeladen werden.
Google Fonts einbinden: Sie brauchen Hilfe?
Wenn Sie Schwierigkeiten haben: Lassen Sie sich von mir helfen. Zum Optimieren von Webseiten gehören für mich auch solche technischen Details wie das DSGVO-konforme, schnelle Laden von Webschriften. Rufen Sie mich an unter +49 40 22 86 75 40 oder schicken Sie mir eine kurze Mail, wenn ich Sie beim Optimieren Ihrer Webseiten unterstützen soll.
Über den Autor
Mein Name ist Michael Bondzio, ich bin Konzeptioner, Texter und Marketingberater. In meiner über 25jährigen Tätigkeit für nationale sowie internationale Marken und Unternehmen aller Größen konnte ich jede Menge Erfahrungen sammeln, die ich in diesem Blog und auf meinem LinkedIn-Profil teile.
Seit 2004 berate ich Selbständige sowie Management und Unternehmensleitung kleiner und mittelständischer Unternehmen zur automatisierten Neukundengewinnung über das Internet.
Wenn Sie Fragen haben oder Unterstützung brauchen: Rufen Sie mich an – +49 40 22 86 75 40 – oder schicken Sie eine E-Mail. Die Erstberatung ist kostenlos.
Werbehinweis zu Links mit Sternchen (*)
Die Links mit Sternchen (*) sind Affiliate-Links. Das heißt, wenn Sie auf der verlinkten Website etwas kaufen, erhalte ich eine Provision. Für Sie entstehen dadurch keine zusätzlichen Kosten. Ich empfehle nur Angebote, von denen ich selbst überzeugt bin und die ich selbst nutze bzw. genutzt habe.
