+49 / 2331 / 1885252

Google Fonts DSGVO-konform einbinden: So geht es!

Nach dem am 20. Januar 2022 beim Landgericht München ergangenen Urteil ist die Einbindung von Google Fonts via Fonts API nicht mehr mit der DSGVO vereinbar. Bei Zuwiderhandlung drohen Webseitenbetreibern empfindliche Geldstrafen.

Klingt gut? Jetzt anfragen
Von Christian Schäfer

Wer auf seiner Website Schriftarten von Google Fonts verwendet, riskiert juristischen Ärger hinsichtlich der DSGVO (Datenschutzgrundverordnung). Grund: Ohne die DSGVO-konforme Einbindung der Schriften findet ein elektronischer Informationsaustausch zwischen dem lokalen Rechner und dem Google-Server in den USA statt. US-amerikanischer Datenschutz genügt den hiesigen strengeren Datenschutzanforderungen nicht. Hier erfährst du, wie du dennoch Google-Fonts-Schriften DSGVO-konform nutzen kannst und wie das geht.

Google Maps auf der Webseite ist ein praktisches Tool für Kunden oder Gäste: Auf der Karte sehen alle Interessierten, wo Ihre Filiale oder Ihr Firmensitz liegt. Das schafft Vertrauen und bietet Komfort, etwa bei der Navigation zu Ihnen. Damit Sie Google Maps einbinden können, benötigen Sie einen API-Key. Warum das? Google berechnet für den Service (ab einer bestimmten Anzahl an Aufrufen) eine geringe Gebühr. Mit dem Key ist es möglich, die Zugriffe zu erfassen. Daher ist die Einbindung verpflichtend.

Aber wie gelingt das? Wer nur wenig Erfahrung mit HTML besitzt, steht möglicherweise vor einer Herausforderung. Mit den Informationen auf dieser Seite ist die aber schnell gelöst.

Wie du die Google Fonts in lokale Webseiten DSGVO-konform einbindest

Die DSGVO (Datenschutzgrundverordnung) nimmt auch Webentwickler in ihre Pflicht – seien diese freiberuflich tätig oder in einer Agentur angestellt. Setzt du als Webentwickler Schriftarten von Google Fonts ein, müssen diese mit den Datenschutzrichtlinien der DSGVO vereinbar sein.

Beim Aufruf einer Google Fonts nutzenden Website gelangen Daten zur Identität des Website-Besuchers auf den Google-Server in den USA. Die Kriterien der US-amerikanischen Datenschutzrichtlinien erfüllen jedoch nicht die hohen Ansprüche der hiesigen DSGVO. Wie du dieses Problem geschickt meistern kannst, erfährst du hier.

Wie du die Google Fonts in lokale Webseiten DSGVO-konform einbindest

Google Fonts lokal einbinden – DSGVO-korrekt

Google-Fonts-Schriftarten brauchst du nicht vom Google-Server herunterzuladen. Du kannst die Schriften direkt auf dem lokalen Server oder Webspace ablegen, von wo du sie dann einbindest. Mit der hier beschriebenen allgemein umsetzbaren Lösung integrierst du Inhalte auf sämtliche gewünschten CMS (Content-Management-Systeme). Manche Beschreibungen oder Begriffe mögen anders lauten, prinzipiell ähneln sich die Prozesse aber so sehr, dass du mit der Anleitung gut klarkommen wirst.

Die richtigen APIs in der Google Cloud Plattform auswählen

Wie du genutzte Google Fonts identifizierst

Falls du nicht weißt, was für Google Fonts für deinen aktuellen Auftrag infrage kommen, stehen dir zur Klärung folgende Optionen offen:

  • Google Fonts herausfinden über den Website-Quellcode oder
  • über die Developer-Tools von Browsern wie Chrome oder Firefox.

Der Quellcode zeigt dir, aus welchen Quellen heruntergeladene Daten stammen. Genau hier kannst du dich später vergewissern, ob wirklich keine Verbindung zum Google-Server mehr besteht.

Google Fonts im Quellcode

Zum Auffinden der Datei im Template deiner Website recherchiert du nun in der CSS-Datei nach einem speziellen Code, der diesem Code-Aufbau entspricht:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Wie du siehst, wurde in diesen Code die Schriftart „Roboto“ eingebunden. Nutzt du eine andere Schriftart, taucht im Code nach „?family“ die entsprechend andere Schriftartbezeichnung auf. Tipp: Lade dir das vollständige Google-Font-Verzeichnis mit deinem Template auf deine Festplatte herunter. Nach dem Öffnen mit einem beliebigen Editor suchst du nach:

@import url('https://fonts.googleapis.com/css2?family=

Du wirst fündig werden. Die .css-Datei merke dir bitte gut.

Gut zu wissen: Bei manchen Browsern – beispielsweise Safari – eignet sich der Bereich „Netzwerk“ besser. Dort lässt du dir nur die Schriften anzeigen und erkennst sofort die Domain, an die die Anfrage läuft.

Wie du deine Google Fonts herunterlädst

Nachdem du deine benötigten Google Fonts ermittelt hast, lädst du sie am besten gleich herunter.

Eine tolle Adresse für das Herunterladen von Schriften und ein kostenloser Service obendrein ist google-webfonts-helper.herokuapp.com von Mario Ranftl. Rund 900 Schriften inklusiv Schnitten und Schriftformaten warten dort schon auf deinen Download.

Verschiedene Schriftschnitte der Schriftart Roboto stehen zum Download bereit

Zum Download trägst du in das Suchfeld einfach deine gewünschte Schriftart ein, zum Beispiel „Roboto“. Über die Punkte 1 und 2 wählst du Zeichensätze und Schriftschnitte, beispielsweise „Roboto“, FontWeight-Variante 100. Anschließend erscheint auf Punkt 3 das CSS-Snippet, über das du später die Schrift in deine zu bearbeitende Website einbindest.

Anzeige des CSS-Snippets zur Einbettung der Schrift in die Website

Achtung: Standardmäßig ist das Server-Verzeichnis „/fonts“ bereits voreingestellt. Möchtest du die heruntergeladenen Schriften woanders ablegen, solltest du schon jetzt dein ausgewähltes Verzeichnis anpassen. Andernfalls bliebe es dir nicht erspart, es später immer wieder an unterschiedlichen Orten im CSS anzupassen.

Nun lädst du dir deine persönliche Schriftauswahl via Punkt 4 als ZIP-Archiv herunter.

Falls du auf einer Website verschiedene Schriftarten verwenden möchtest, wiederholst du das Procedere beliebig oft entsprechend dem hier erläuterten Beispiel für die Schriftart „Roboto“. Besitzt du einen GitHub-Account? Dort kannst du Mario Ranftl für seinen hilfreichen Service als Dankeschön eine positive Bewertung hinterlassen.

Wie du die Schriften auf deine Websites hochlädst

Das auf deinen Rechner heruntergeladene ZIP-Archiv mit deinen Schriften erscheint in mehreren unterschiedlichen Formaten wie EOT, SVT, TTF, WOFF und WOFF2. Zum Hochladen der Dateien auf deinen Webspace legst du nun das bereits erstellte Verzeichnis – hier also „/fonts“ – an. Anschließend kopierst du deine Schriften dort hinein.

Wie du das CSS deiner Website anpasst

Die auf deinem Webspace deponierten Schriftarten brauchst du jetzt bloß noch ins CSS zu integrieren. Das benötigte CSS-Snippet ist im Google-Webfonts-Helper ersichtlich. Über diese CSS-Datei führst du alle erforderlichen CSS-Anpassungen in deiner Datei über einen Editor nach deiner Wahl aus. Hierfür musst du den anfänglichen Code ganz löschen und durch die kopierten CSS-Anweisungen ersetzen. Dann überschreibst du die alte .CSS-Datei mit deiner eben bearbeiteten Datei.

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Wie du die Verbindung zum Google-Server trennst

Bald hast du es geschafft! Nun kontrollierst du noch, ob deine Verbindung zum Google-Server auch ganz bestimmt getrennt ist. So bist du auf der sicheren Seite, dass keinerlei Informationen mehr vom lokalen Rechner an Google übermittelt werden.

Google Fonts im Quellcode

Suche dazu die Developer-Tools bei Chrome beziehungsweise Firefox auf. Unter „Quellcode“ kannst du dich davon überzeugen, dass die Schriftart-Datei unmittelbar von deinem Server geladen wird statt vom Google-Server. Werden anstelle der vormals angezeigten Google-Server-Verbindungen jetzt ausschließlich die lokalen Schriften angezeigt, ist das der Beweis für deine erfolgreiche und DSGVO-konforme Einbindung der Schriften.

Cloud Hosting oder Shared Hosting

Beim Cloud Hosting wird eine Website auf mehreren Servern gehostet, die alle Ressourcen miteinander teilen. Beim Shared Hosting teilen sich mehrere Websites die Ressourcen eines einzigen physischen Servers.

Google Fonts DSGVO-konform einbinden

Ohne die DSGVO-konforme Einbindung der Schriften findet ein elektronischer Informationsaustausch zwischen dem lokalen Rechner und dem Google-Server in den USA statt. Hier erfährst du, wie du dennoch Google-Fonts-Schriften DSGVO-konform nutzen kannst und wie das geht.

Google Maps: API-Key erstellen

Zeigen Sie Ihren Kunden, wo Sie sind: Google-Maps-Karten auf der Webseite sind eine beliebte Komfort-Funktion. Dafür benötigen Sie einen API-Key. Erfahren Sie hier, wie Sie den Schlüssel erstellen und was dabei zu beachten ist.

Mobile First Strategie

Wie funktioniert Mobile First? Mit der richtigen Strategie begeistern Sie Ihre Webseitenbesucher und verbessern das Ranking. Dabei geht es um intuitive Strukturen und Reduktion auf das Wesentliche – aber nicht nur!

Website-Projekte mit Ultrapixel

Ultrapixel ist Ihr Partner für komplette Webseite-Projekte. Wir unterstützen Sie von der Planung über die Entwicklung bis zur Contenterstellung.

Übersicht Kompetenzen

Referenzen von Ultrapixel

Wir haben zahlreiche Projekte realisiert. Werfen Sie einen Blick in unsere Referenzen und entdecken Sie unsere Umsetzungen für regionale und nationale Partner.

Übersicht Referenzen

Visitenkarte im Web oder Komplettauftritt für Unternehmen mit allen Raffinessen? Ultrapixel aus Hagen realisiert beides. Wir freuen uns, auf eine lange Erfahrung zurückblicken zu dürfen. In dieser Zeit haben wir bereits mit folgenden Kunden zusammengearbeitet:

  • jobcenter Hagen
  • Stadt Hagen
  • Bundeswehr
  • caritas Hagen
  • Fichte Hagen
  • E.u.r.o.Tec GmbH
  • Anwälte Platanenhof
  • HSI HERMANN SCHWERTER Iserlohn GmbH
  • FKM PRÄZISION & SÄGETECHNIK
  • Anker Schroeder ASDO GmbH
  • Klann Anlagentechnik GmbH
  • KruCon  Markus Krüger Unternehmensberatung
Kostenlose Beratung: +49 / 2331 / 1885252
info@ultrapixel.de Jetzt Angebot anfragen