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. Doch wer sie auf dem eigenen Server einbindet, umgeht die Probleme.

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 in der Online-Variante eingesetzt. Der Nachteil: Bereits beim Laden einer Seite werden Daten des Nutzers an Google-Server übertragen – ohne dass dieser eine Chance hat, dieser Ü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 – die Qual der Wahl

Wer Google Fonts installieren 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.

Was viele nicht wissen: die Textbeispiele zu den Fonts kann man auch durch eigenen Text ersetzen. Und man kann Größen oder Schriftgrad ändern. Einfach mal rumprobieren …

Google Fonts einbinden – der bequeme Weg

Um Webschriften so einzubinden, wie Google das geplant hat, wählt man den gewünschten Font durch Klick auf das rote Kreuz. Unten rechts werden dann die ausgewählten Schriftfamilien angezeigt. Durch Klick öffnet sich der Tab.

Google Fonts: Schriftschnitte zusammenstellen

Unter „Customize“ lassen sich die Schriftschnitte auswählen, die man benötigt. Dabei auf die beschränken, die man auch wirklich einsetzt, denn jeder zusätzliche Schnitt sorgt für längere Ladezeit. Da dieser Punkt so entscheidend ist, wird oben rechts die zu erwartende „Load Time“ angezeigt. 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.

Googe Fonts: Einbinde-Code kopieren

Durch Klick auf den Reiter „Embed“ erhält man den Code, den man auf seiner Website einbauen soll. Dieser gehörte bisher in den <head>-Bereich der Website:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i&display=swap" rel="stylesheet">

Heute Google Fonts bitte nicht mehr so einbinden, wir kommen gleich dazu.

Und das ist die passende CSS-Regel für den ausgewählten Font:

font-family: 'Open Sans', sans-serif;

Was passiert nun, wenn der Google Fonts über den Google-Code auf Ihren Webseiten eingesetzt wird? Bei jedem Aufruf einer Webseite werden dann – wenn die Schriften nicht schon im Browser-Cache sind – die benötigten Webschriften geladen. Dieses Laden erfolgt über Google-Server in den USA. Dabei werden dann natürlich 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“. In dem anonymisierten Beispiel werden gleich zwei Formen der Einbindung von Webfonts ü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 beispielsweise bei All-inkl oder Webgo oder von mir aus auch bei 1&1 steht.

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 20jä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.

Den ersten professionellen Kontakt mit dem Internet hatte ich 1996 als Kreativdirektor, heute 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.

Neue Blogbeiträge? Ich schicke Ihnen eine Mail: