Google Fonts und die DSGVO: Webfonts sicher einbinden

Googe Webfonts lokal auf eigenem Server einbinden
Wie sichtbar ist Ihr Unternehmen im Internet? Website-Check!
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 dieses Problem umgehen will, bindet sie lokal auf dem Server ein.

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. Das war die Zeit, als praktisch alle Websites auf Arial, Verdana oder Times basierten.

Auch heute noch kann man Websites so designen, 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. Der Nachteil: 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. In diesem Artikel werden wir sehen, 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

Wer sich einen Überblick über Google Fonts verschaffen möchte, geht erst mal auf die Website von Google Fonts und schaut, was es so gibt. Als Neuling und Laie wird man von dem Angebot wahrscheinlich erschlagen. Am besten nimmt man also, was die meisten nehmen – durch die Sortierung nach „Most popular“ oder „Trending now“. Diese Webfonts haben dann oft den Vorteil, dass viele Browser sie bereits schon auf anderen Websites geladen haben und die Daten aus dem Cache ziehen können. Die eigene Website lädt dann schneller.

Um Webschriften so einzubinden, wie Google das geplant hat, wählt man den gewünschten Font durch Klick aus. Es werden dann die verschiedenen Schnitte angezeigt (Light, Medium, Bold …). Durch Klick auf „Select this style“ wählt man den Schnitt aus. Dabei auf die beschränken, die man auch wirklich einsetzt, denn jeder zusätzliche Schnitt sorgt für längere Ladezeit. Auch die Anzahl der Schriftarten insgesamt sollte aus diesem Grund beschränkt bleiben. Mehr als 3 Schriftfamilien sollte man nur mit sehr guter Begründung gleichzeitig auf seinen Webseiten einsetzen.

Rechts im Fenster wird ein Code angezeigt, den man auf seiner Website einbinden soll. Zusätzlich kann man sich über „Download all“ die gewählten Schriften als TTF-Fonts herunterladen, beispielsweise, um sie auf seinem Computer zu installieren. Google Fonts bitte nicht über den Code einbinden, es wird sonst gegen die DSGVO verstoßen.

So werden Google Fonts klassisch extern geladen

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 geladen. Dieses Laden erfolgt über Google-Server in den USA. 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

Wenn Sie nicht sicher sind, ob bei Ihnen Google Fonts verwendet werden, öffnen Sie einfach 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 zwei Webfonts (Lato und Raleway) über Google-Server genutzt.

Nutzung von Google-Server für Webschriften erkennen

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

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 bleiben einfach mal beim Font Open Sans.

Etwas weiter unten finden Sie den CSS-Code, über den Sie die Schriften auf Ihren Webseiten lokal einbinden.

Google Webfonts Helper: CSS Code 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 Helper: Download der ausgewählten Schriften

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 über diesem Ordner 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, können Sie jede andere CSS-Datei im Child-Ordner verwenden, die frühzeitig beim Aufruf der Website geladen wird.

Und damit sind Sie dann auch schon fertig. Bitte auch daran denken, die bisherigen Aufrufe des Google Schriftservers zu entfernen.

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.

Und wenn Sie Schwierigkeiten haben: Zum Optimieren Ihrer 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.

Wer schreibt hier?

Online-Marketingberater Michael BondzioMein Name ist Michael Bondzio, ich bin Konzeptioner, Texter und Marketingberater. Aus meiner über 25jährigen Tätigkeit für nationale sowie internationale Marken und Unternehmen aller Größenklassen habe ich jede Menge Erfahrungen, die ich in diesem Blog 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.

Google Fonts einbinden: Sie brauchen Hilfe?

Gerne optimiere ich auch Ihre Website inklusive Einbindung der Google Fonts. Schicken Sie mir einfach eine kurze Mail oder rufen Sie mich an: +49 40 22 86 75 40.