Google Fonts lokal einbinden und DSGVO-konform nutzen – so geht’s

Viele Unternehmen verwenden Google Fonts auf ihrer Website und in WordPress. Die kostenlosen Schriften können die Typografie der Seiten verschönern und damit das Look-and-feel verbessern. Die Sache hat jedoch einen Haken: Sie machen Ihre Website von externen Quellen abhängig. Schlimmer noch: Google Fonts verursachen in vielen Fällen erhebliche DSGVO-Probleme, da personenbezogene Daten ungefragt in die USA übertragen werden. Viele Unternehmen wurden bereits wegen Google Fonts abgemahnt. Mehr zu den Hintergründen und Risiken von Abmahnungen im Zusammenhang mit Googles Schriftensammlung lesen Sie unserem Blogbeitrag auf heise-regioconcept.de: Google Fonts Abmahnung: Was Sie jetzt wissen müssen. In diesem Beitrag geht es nun darum, wie Sie Datenschutzprobleme mit Google Fonts vermeiden und gleichzeitig die Geschwindigkeit der eigenen Website verbessern können.

Google Fonts Download: Weshalb besteht Handlungsbedarf?

Das juristische Hickhack um Google Fonts hat seinen Ursprung in der dynamischen Einbindung amerikanischer Webdienste in eine hiesige Website ohne vorherige Einwilligung des Nutzers. Schuld daran ist nicht Google, sondern die europäische Datenschutz-Grundverordnung (DSGVO). Öffnet ein User eine Website, in der Google Fonts dynamisch und damit online eingebaut sind, lädt der Browser die Schriftarten automatisch von den Google-Servern herunter und hinterlässt dabei die IP-Adresse des Besuchers. Wegen des IP-Fußabdrucks ist das Nachladen von Google Fonts auf Internetseiten ohne ausdrückliche Einwilligung des Nutzers datenschutzwidrig und somit rechtswidrig, stellte das Landgericht München in seinem richtungsweisenden Urteil vom 20.01.2022 fest. Das Gericht hat dem Kläger einen Unterlassungsanspruch und darüber hinaus Schadensersatz zugesprochen.

Das Urteil des LG München schafft zumindest Klarheit: Aus der DSGVO ergibt sich ein genereller Anspruch gegen Webseitenbetreiber, die Weitergabe von IP-Adressen an Google und andere US-amerikanische Anbieter ohne Einwilligung zu unterlassen. „Das Münchner Urteil betrifft nur exemplarisch den populären Dienst Google Fonts“, erläutert Rechtsanwalt Niklas Plutte. „Die vom Gericht aufgestellten Grundsätze gelten für alle aus den USA stammenden Webdienste. Gemeint sind nicht bloß Alternativangebote wie Adobe Fonts oder MyFonts, sondern buchstäblich jeder US-Dienst, der dynamisch in eine Internetseite eingebunden wird.“ Wer allerdings die Fonts von Google herunterlädt und lokal auf dem eigenen Server einbindet, umgeht die beschriebenen Probleme, da keine Verbindung zu Drittservern in den USA aufgebaut wird.

Wie Sie die eigene Website auf Google Fonts überprüfen

Ob Roboto, Open Sans, Montserrat, Oswald oder Source Sans Pro: Die Schriften von Google gehören zu den besten Webfonts und sind deshalb bei Webdesignern und WordPress-Entwicklern sehr beliebt. Hinzu kommt das vorteilhafte Lizenzmodell, denn Google Fonts können kostenlos und ohne langwierige Registrierung in Websites, Stylesheets und Themes integriert werden. Gehen Sie also davon aus, dass auch Ihre Homepage oder Ihr Online-Shop die Schiften von Google verwendet. Um sicherzugehen, dass Ihre Website Google Fonts nachlädt, öffnen Sie die Entwicklerkonsole Ihres Browsers und überprüfen, welche Fonts geladen werden. Noch bequemer ist es, die eigene Website mit einem Google Fonts Checker zu überprüfen. Empfehlenswert sind u. a.:

Die in der Regel kostenlosen Web-Tools untersuchen nach Eingabe der URL, ob Schriften von Google bezogen werden, die zu einer DSGVO-Abmahnung führen könnten. Sie erfahren, welche Schriftarten auf Ihrer Seite genutzt werden und erhalten eine Übersicht der betroffenen CSS-Dateien, die Sie bearbeiten sollten. Der Check ist ratsam, denn in vielen Fällen verfügen WordPress-Themes und ‑Plugins über integrierten Code, der Google Fonts automatisch lädt, auch wenn Sie die Schriftarten gar nicht benötigen.

E-Book kostenlos anfordern – Online-Marketing für KMU!

Warum reicht ein Consent-Banner für Google Fonts nicht aus?

Für Werbe- und Marketing-Cookies besteht ja ohnehin eine Opt-in-Pflicht, sodass es naheliegt, auch die Einwilligung für den Zugriff auf Google Fonts über das Cookie-Banner sicherzustellen. Die Idee ist an sich gut, aber die Technik macht es nahezu unmöglich, die datenschutzrechtlichen Anforderungen der DSGVO zu erfüllen. Warum ist das so? Moderne Browser greifen bereits beim Aufruf der Website auf die Google-Server zu, noch bevor dem Nutzer das Cookie-Banner angezeigt wird. Der IP-Stempel befindet sich also bereits in den Server-Logs, lange bevor der Besucher überhaupt die Möglichkeit hat, dem Herunterladen der Fonts über das Banner zuzustimmen. Theoretisch könnten Sie den Fonts-Download in der Weise umgehen, dass zunächst nur das Consent-Banner angezeigt wird und die Google Fonts erst nach dem Bestätigungsklick geladen werden. Dazu müssen Sie jedoch sämtlichen CSS-Code der Website akribisch anpassen und Themes bei jedem Update neu bearbeiten.

Ein weiteres Problem tritt auf, wenn Besucher der Verwendung von Google Fonts nicht zustimmen. In diesem Fall wird Ihre Website mit den falschen Fonts angezeigt und das Design wird zerstört – dies ist im Hinblick auf Ihr Online-Marketing und Ihr Branding nicht empfehlenswert. Aus technischer Sicht ist die lokale Einbindung von Google Fonts der einzig empfehlenswerte Weg, um die Webfonts DSGVO-konform zu verwenden.

Google Fonts lokal einbinden: Schritt für Schritt erklärt

In vielen Fällen sind die Schriftarten von Google ein wesentlicher Bestandteil des Designs einer Website und Sie möchten sie nicht ganz entfernen. Um den strengen Datenschutzbestimmungen der DSGVO gerecht zu werden, empfiehlt es sich, Google Fonts lokal und damit statisch einzubinden. Das bedeutet, dass Sie die Fonts auf Ihrem eigenen Server speichern und der Browser des Besuchers sie von dort lädt. Damit verhindern Sie Online-Zugriffe auf Google, bei denen die Suchmaschine die Nutzer über ihre IP-Adresse zurückverfolgen kann. Die folgende Schritt-für-Schritt-Anleitung zeigt Ihnen, wie Sie Google Fonts DSGVO-konform lokal auf Ihrem Webserver einbinden.

Schritt 1: Fonts-Check

Ermitteln Sie, welche Schriften Sie bisher auf Ihrer Website verwenden, indem Sie den CSS-Code der Webseiten überprüfen. Wenn Sie mit WordPress oder einem anderen CMS arbeiten, suchen Sie nach Google Fonts im Einstellungsmenü, im Theme oder in den Plugins. Sie können auch die Entwicklerkonsole Ihres Browsers verwenden: Suchen Sie dort nach Zugriffen auf fonts.googleapis.com und fonts.gstatic.com. Von diesen Google-Webdomänen werden extern eingebundene Schriften des US-Konzerns geladen.

Schritt 2: Fonts herunterladen

Laden Sie die Google Fonts, die Sie künftig selbst hosten möchten, auf Ihren Rechner. Um die benötigten Dateien einfach und schnell herunterzuladen, verwenden Sie am besten den frei zugänglichen google-webfonts-helper von Mario Ranftl. Das kostenlose Tool liefert Ihnen zu jeder Google-Schrift die entsprechenden Dateien und den CSS-Code. Er enthält das @font-face-Element einschließlich font-display, font-family, font-style und font-weight. Kopieren Sie die Code-Schnipsel aus dem Webfonts Helper in eine Textdatei auf Ihrem PC, damit Sie den Code jederzeit zur Hand haben.

Schritt 3: Fonts auf den Server laden

Entpacken Sie die ZIP-Datei, die Sie vom Google Webfonts Helper erhalten haben, in ein leeres Verzeichnis auf Ihrem Computer. Laden Sie die resultierenden Font-Dateien auf Ihren Server, in der Regel ist hierfür der Ordner /fonts vorgesehen.

Schritt 4: Fonts statisch einbinden

Im letzten Schritt binden Sie die Google Fonts in den CSS-Code Ihrer Website ein. Fügen Sie dazu den im Google Webfonts Helper angezeigten Code in die CSS-Datei (style.css) oder das Theme ein. Achten Sie darauf, dass der Pfad zu den Schriftdateien korrekt ist.

Herzlichen Glückwunsch – damit haben Sie die Google-Schriften statisch statt dynamisch eingebunden und sind in Sachen DSGVO-Abmahnung insoweit auf der sicheren Seite! Leeren Sie Ihren Browser-Cache und testen Sie Ihre Website. Prüfen Sie dabei, ob die Inhalte wie gewünscht mit den richtigen Fonts angezeigt werden. Wenn alles funktioniert hat, sollten Sie nun keine Verbindung mehr zu den Google-Servern haben und somit DSGVO-konform sein. Mit etwas Glück laufen die Zugriffe auf die Schriftdatei über den eigenen Server sogar noch schneller ab als über Google.

Welche Vorteile bietet die Fonts-Einbindung per Child Theme?

WordPress-Themes lassen sich bei Bedarf bearbeiten, allerdings gehen alle Änderungen bei einem Update des Themes normalerweise verloren. Indem Sie ein „Child Theme“ in WordPress anlegen, können Sie kleinere Anpassungen am Design Ihrer Website und damit auch an den Google Fonts viel einfacher vornehmen, ohne in den Code des Haupt-Themes eingreifen zu müssen. Das Haupt-Theme wird als Parent Theme bezeichnet und das Child Theme ist dessen Abkömmling in Form einer verlinkten Kopie. Das Child Theme erbt alle Style-Eigenschaften des übergeordneten Parent Themes. Individuelle Anpassungen innerhalb des Child Themes überschreiben jedoch die Standards des Parent Themes und behalten somit ihre Gültigkeit. Ein Child Theme ist insbesondere bei Updates von Vorteil: Sie können das Parent Theme Ihrer Website jederzeit aktualisieren, ohne die bisherigen Änderungen zu verlieren. Neue Anpassungen nehmen Sie dann ohne Zeitdruck im untergeordneten Child-Theme-Ordner vor. Geht dabei mal etwas schief, greifen Sie einfach auf das Parent Theme zurück.

Google Fonts in WordPress entfernen

Fein raus sind Sie, wenn der Entwickler des von Ihnen verwendete WordPress-Themes oder Plugins die Möglichkeit vorgesehen hat, Google Fonts zu deaktivieren. In diesem Fall genügt es, den oder die entsprechenden Schalter (etwa „Use Google Fonts“) in den Einstellungen zu verwenden, um dem dynamischen Nachladen ein Ende zu bereiten. Es ist davon auszugehen, dass immer mehr Entwickler eine Wahlmöglichkeit hinsichtlich der Googe-Fonts-Referenzierung in ihre Themes einbauen. Doch solange das auf das Theme Ihrer Website nicht zutrifft, müssen Sie Google Fonts noch manuell deaktivieren.

Eine Lösung bieten Blocker-Plugins: Sie verhindern das Nachladen der Schriften durch ein Theme und innerhalb von CSS vom Google Fonts Server. Eines der ersten Plugins für WordPress war das kostenlose Remove Google Fonts References von Bruno Xu. Vorteil dieses Plugins ist die ausgesprochen einfache Bedienung: Es sind keine Einstellungen nötig, Sie müssen es nur aktivieren, um die Einbindungen der Schriften von Google umgehend zu blockieren. Das Plugin wird zwar nicht mehr weiterentwickelt, doch es gibt Alternativen, etwa den Borlabs Font Blocker oder Disable and Remove Google Fonts.

Google Fonts mit einem Plugin lokal einbinden

Als WordPress-Nutzer können Sie auf ein Arsenal an teils kostenpflichtigen Plugins für die Umstellung der Google Fonts auf eine lokale Einbindung zurückgreifen. Die Plugins funktionieren mit allen gängigen WordPress-Themes. Hier eine Auswahl empfehlenswerter Tools:

Achten Sie darauf, ob das Plugin nur das Nachladen von Google Fonts über WordPress-Themes oder auch über WordPress-Plugins unterstützt. Wenn nur Theme-Zugriffe angepasst werden, müssen Sie sicherstellen, dass Sie eine andere Lösung für Plugins finden, die die Google-Schriftartensammlung verwenden.

Finden Sie Ihr persönliches Homepage-Paket! 

Google Fonts bei YouTube und Google Maps lokal verwenden

Auch andere Google-Dienste wie etwa die Videoplattform YouTube oder das Kartenangebot Google Maps nutzen die Google-eigene Fonts-API sowie die Google Webfonts – sie fallen damit ebenfalls unter die DSGVO-Problematik. Teilweise werden die Schriften von Google beim Einbinden von YouTube-Videos über einen iFrame versteckt geladen, ohne dass dies dem Website-Betreiber bewusst ist. Für YouTube ist ein Ersatz an sich einfach, da mit Vimeo ein ebenso professioneller Videohoster zur Verfügung steht – aber auch hier gibt es die DSGVO-Problematik. Kleinere Videos können Sie als Alternative zu einer Videoplattform auch selbst hosten. Eine weitere Lösung bietet das Plugin WP YouTube Lyte für WordPress. Es ersetzt eingebettete YouTube-Videos automatisch durch ein statisches und Google-Fonts-freies Vorschaubild. Erst wenn der Nutzer auf das Vorschaubild klickt, wird eine Verbindung zu YouTube hergestellt und das nicht eingebettete Video abgespielt. Das Plugin Borlabs Cookie sucht nach Links zu YouTube und Google Maps. Wird ein eingebetteter Inhalt erkannt, fragt die Software vor dem Abspielen des Videos oder der Anzeige der Google-Karten den Nutzer nach seiner Zustimmung, erst dann werden die externen Inhalte aktiviert. Und mit OSM – OpenStreetMap binden Sie die kostenlosen OpenStreetMap-Karten anstelle von Google Maps auf Ihren Webseiten ein.

Niemand muss also auf die beliebten Google-Schriften verzichten. Mit unserer Anleitung erhalten Sie das gewohnte Layout Ihrer Website und bleiben dennoch auf der sicheren Seite. Das gilt übrigens auch, wenn Sie sich von uns Ihre professionelle Homepage erstellen lassen. Nehmen Sie gerne Kontakt mit uns auf!