Dem Datenschutz zuliebe: wie ihr Google Fonts DSGVO-konform lokal in eure Webseiten einbindet
Die Datenschutzgrundverordnung (DSGVO), die am 25. Mai nach zweijähriger Übergangsphase EU-weit in Kraft tritt, stellt speziell dann einige Anforderungen an euch, wenn ihr als freiberuflicher Webentwickler oder als Agentur tätig seid. In unserem DSGVO-Wissenspaket gehen wir ausführlich auf die wesentlichen Aspekte der DSGVO für Agenturen ein. Diesbezüglich haben uns in den letzten Tagen zahlreiche Nutzer unseres Wissenspakets gefragt, ob es eine Möglichkeit gibt, die Google Fonts datenschutzkonform einzusetzen. Üblicherweise werden die jeweiligen Schriften nämlich vom Google Server nachgeladen, wodurch Daten an diesen übermittelt werden. Aus Datenschutzsicht ein unschöner Aspekt – doch zum Glück geht das auch anders!
Anstatt die Schriften vom Google Server zu laden, können diese nämlich auch lokal auf dem eigenen Server bzw. Webspace abgelegt und eingebunden werden. Am Beispiel des freien Blogsystems WordPress wollen wir euch die notwendigen Schritte in diesem Artikel konkret erklären. Natürlich lässt sich das auch auf beliebige Content Management Systeme übertragen – eventuell weichen einige Beschreibungen etwas ab, grundsätzlich ist das Vorgehen aber sehr ähnlich.
- Notwendig dank der DSGVO: Google Fonts sollten lokal eingebunden werden
- Genutzte Google Fonts identifizieren
- Benötigte Google Fonts herunterladen
- Schriften auf eure Website hochladen
- CSS eurer Website anpassen
- Verbindung zum Google Server trennen
Notwendig dank der DSGVO: Google Fonts sollten lokal eingebunden werden
Genutzte Google Fonts identifizieren
Zunächst einmal müsst ihr wissen, welche Google Fonts ihr im jeweiligen Kundenprojekt einsetzt. Wenn ihr diese Frage nicht spontan beantworten könnt, gibt es mehrere Wege, dies nachzuschauen. Falls ihr die Schriften über ein Plugin wie „Easy Google Fonts“ einbindet, könnt ihr die konfigurierten Schriften z. B. über die Customizer-Funktion eures Themes einsehen. Unter dem Punkt „Typography“ » „Default Typography“ findet ihr die Einstellungen für Absätze und Überschriften.
Alternativ könnt ihr die Fonts über den Quellcode eurer Seite oder über die Developer Tools in Chrome bzw. Firefox herausfinden. Unter dem Punkt „Sources“ könnt ihr nachvollziehen, von welchen Quellen Daten für eure Website geladen werden. Übrigens könnt ihr an dieser Stelle später überprüfen, ob tatsächlich keine Verbindung mehr zum Google Server hergestellt wird.
Benötigte Google Fonts herunterladen
Nachdem ihr nun wisst, welche Google Fonts ihr benötigt, solltet ihr diese auch herunterladen. Besucht hierfür den von Mario Ranftl kostenlos bereitgestellten Service google-webfonts-helper.herokuapp.com. Hier könnt ihr knapp 900 Schriften mit diversen Schnitten in zahlreichen Schriftformaten herunterladen.
Gebt hierzu einfach im Suchfeld die gewünschte Schrift ein – in unserem Beispiel suchen wir nach der Schrift „Roboto“. Unter Punkt 1 und 2 könnt ihr dann eure benötigten Zeichensätze und Schriftschnitte auswählen. Detaillierte Informationen hierzu findet ihr in der bereits oben aufgeführten Ausgabe der Developer Tools. Für unsere Testwebseite benötigen wir die Schrift „Roboto“ in der FontWeight-Variante 100.
Habt ihr die Schrift in der gewünschten Konfiguration ausgewählt, wird unter Punkt 3 das CSS-Snippet angezeigt, über welches ihr die Schrift später in eure Website einbinden könnt.
Bitte beachtet: Das Serververzeichnis „/fonts“ ist standardmäßig voreingestellt – wollt ihr die Schriften an anderer Stelle auf eurem Webspace ablegen, passt das gewünschte Verzeichnis am besten schon hier an, dann müsst ihr es später nicht an verschiedenen Stellen im CSS angleichen.
Abschließend könnt ihr euer individuell zusammengestelltes Schriftpaket unter Punkt 4 bequem als ZIP-Archiv herunterladen.
Sollten mehrere Schriften auf eurer Seite zum Einsatz kommen, könnt ihr diesen Vorgang natürlich beliebig oft wiederholen. Und wenn euch der Service gefällt und ihr bereits einen GitHub-Account habt, freut sich Mario ganz bestimmt über einen Stern. ;-)
Schriften auf eure Website hochladen
Nach dem Download findet ihr auf eurem Rechner ein ZIP-Archiv mit den gewünschten Schriften in zahlreichen Formaten (EOT, SVG, TTF, WOFF, WOFF2).
Diese Datei gilt es nun auf den Webspace hochzuladen: Nutzt hierfür idealerweise einen verschlüsselten Übertragungsweg wie SFTP oder SCP. Legt für die Dateien das zuvor definierte Verzeichnis (in unserem Fall „/fonts“) an und kopiert die Schriften hinein.
CSS eurer Website anpassen
Ihr nähert euch bereits der Ziellinie! Nachdem ihr die benötigten Schriften auf eurem Webspace abgelegt habt, müssen diese nur noch in euer CSS eingebunden werden. Das hierfür notwendige CSS-Snippet wurde euch ja im Google-Webfonts-Helper angezeigt.
In unserem Beispiel sieht es wie folgt aus:
/* roboto-100 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
/* IE9 Compat Modes */
src: url('../fonts/roboto-v18-latin-100.eot');
src: local('Roboto Thin'), local('Roboto-Thin'),
/* IE6-IE8 */
url('../fonts/roboto-v18-latin-100.eot?#iefix') format('embedded-opentype'),
/* Super Modern Browsers */
url('../fonts/roboto-v18-latin-100.woff2') format('woff2'),
/* Modern Browsers */
url('../fonts/roboto-v18-latin-100.woff') format('woff'),
/* Safari, Android, iOS */
url('../fonts/roboto-v18-latin-100.ttf') format('truetype'),
/* Legacy iOS */
url('../fonts/roboto-v18-latin-100.svg#Roboto') format('svg');
}
Am schnellsten könnt ihr die notwendigen CSS-Anpassungen an der Datei „style.css“ über den eingebauten Editor in WordPress vornehmen. Bitte beachtet jedoch, dass eure Änderungen bei zukünftigen Aktualisierungen eures Themes überschrieben werden. Es ist daher empfehlenswert, ein Child-Theme anzulegen und die notwendigen Änderungen darin vorzunehmen.
Ein Child-Theme könnt ihr entweder manuell anlegen oder hierfür das Plugin „Child Theme Configurator“ nutzen. In eurem Child-Theme findet ihr ebenfalls die Datei „style.css“, in der die beschriebenen CSS-Anpassungen durchgeführt werden können.
Verbindung zum Google Server trennen
Im letzten Schritt kappen wir nun die Verbindung zum Google Server und stellen sicher, dass tatsächlich keine Informationen zu ihm übertragen werden.
Falls ihr für die Nutzung der Google Fonts das eingangs genannte Plugin „Easy Google Fonts“ nutzt, reicht es, dieses zu deaktivieren.
Alternativ gibt es zwei Plugins, die genau dies per Knopfdruck für euch tun: „Disable Google Fonts“ und „Remove Google Fonts“. Beide müssen lediglich installiert und aktiviert werden – eine Konfiguration ist nicht notwendig.
Anschließend solltet ihr eure Webseite neu laden und prüfen, ob die Schriften noch wie gewünscht geladen und dargestellt werden.
Zum Schluss könnt ihr noch mal die Developer Tools bemühen, um sicherzustellen, dass eure Website tatsächlich nicht mehr mit dem Google Server spricht. ;-)
Wenn anstatt der zuvor noch angezeigten Verbindungen zum Google Server (fonts.googleapis.com, fonts.static.com) nun die lokalen Schriften aufgeführt werden, habt ihr die Schriften erfolgreich eingebunden.
Alternativ zur manuellen Konfiguration kann man auch WordPress-Plugins verwenden. Das Plugin DSGVO-Patron bindet neben der Font-Konfiguration auch weitere externe Dienste lokal ein, außerdem entfernt es die IP-Aufzeichnungen bei der Kommentarfunktion im Blog.
Wir wünschen euch viel Erfolg dabei! Solltet ihr noch Fragen oder Anmerkungen haben, schreibt es gerne hier in einem Kommentar!
Hinweis: Da der Autor dieses Artikels kein Jurist ist, stellt dieser Artikel weder eine Rechtsberatung dar, noch ersetzt er eben diese. Bitte wenden Sie sich im Zweifel an einen Rechtsanwalt.
Kommentare
eine Frage habe ich noch dazu. Wenn man die google-Schriften lokal einbindet, sollte man trotzdem in der Datenschutzerklärung darauf hinweisen, dass man google webfonts einsetzt?
Schöne Grüße
Petra Schoch
wenn die Daten ausschließlich lokal geladen werden und keine Übertragung an externe Dienste erfolgt, muss man dies nicht tun.
Sind Sie sich jedoch unsicher oder sollten in anderen Fällen auf jeden Fall Daten übertragen werden, dann gehört die jeweilige Info in die Datenschutzerklärung.
Bitte beachten Sie jedoch unseren Hinweis, dass jegliche Texte und Kommentare, diesen eingeschlossen, keine Rechtsberatung darstellt. Er ersetzt diese auch nicht. Im Zweifel sollten Sie sich also an einen Rechtsanwalt wenden.
Viele Grüße
Florian Jürgens
vielen Dank für Ihre Antwort. Ja, das werde ich wohl so machen, sicher ist sicher. Im Übrigen eine tolle Anleitung, vielen Dank.
Schöne Grüße
Petra Schoch
Den Nutzer vorher zu fragen, ob er für schnellere Ladezeiten darin einwilligt, macht ja an dieser Stelle gar keinen Sinn.
Übrigens: Hat man Google Maps in der Seite eingebunden (dafür gibt es wohl keine lokale Alternative), braucht man sich um das Ersetzen der Fonts kaum noch zu bemühen -- denn dann wird der Googlefont-Server auf jeden Fall auch wieder kontaktiert.
Über den Sinn, Google Fonts zu entfernen, gleichzeitig aber immer noch Youtube, Maps, Analytics, usw., drin zu haben, kann man sicher auch streiten. Hier müssen sicherlich Einzelfallentscheidungen getroffen werden, je nach den genauen Bedingungen der einzelnen Website (also z.B. welche ext. Ressourcen noch so verwendet werden).
PS: wie im ersten Beitrag von Janett haben die im Tutorial genannten Plugins die Verbindung zum Google Font Server nicht unterbrochen. Die Fonts wurden laut Chrome immer noch geladen. Erst das von Janett empfohlene Plugin"Remove Google Fonts References" hat den Job erledigt.
danke dafür und auch für den Hinweis. :-)
Viele Grüße
Kristina
vielen Dank für deine Anfrage.
Wenn du dich zu meinen Händen an support@mittwald.de melden würdest, helfe ich dir gerne persönlich weiter und wir werfen gemeinsam einen Blick auf deinen Account, um festzustellen, was wir da machen können. :-)
Viele Grüße
Florian
Nun habe ich aber momentan schon genug Arbeit am Hals und würde das erstmal nur machen, wenn juristische Konsequenzen zu befürchten wären (und später nachholen). Kann denn ein Abmahnanwalt aus dem Nachladen von Fonts erfolgreich einen kostspieligen Vorgang generieren?
Und wie sieht es denn übehaupt mit dem Einbinden von Google Maps, eventuell dort noch mit Routenplaner, aus?
Auch da lassen sich ja Rückschlüsse gewinnen.
Grüße, Christian
Momentan erlebe ich bei Kunden, dass entweder in vorauseilendem Gehorsam so viel wie möglich umzusetzen versucht wird -- und dabei z.T. auch deutliche "Convenience-Einbußen" in Kauf genommen werden -- eben wie z.B. das ersatzlose Entfernen von Google Maps oder Youtube-Videos. Es gibt tatsächlich auch schon den ersten, der seinen Internetauftritt vor Angst (sic!) lieber komplett abschaltet. Nicht mein direkter Kunde (whew... ;-)), aber in der Nähe.
In den Datenschutzerklärungen, die aktuell so zum Einsatz kommen, kann man i.d.R. auch Absätze zu externen Inhalten wie Googlefonts, Maps, Videos, finden... das übliche halt. Ob dieser Hinweis in der Datenschutzerklärung reichen wird? Denn wenn der Kunde die Website aufmacht, werden die Daten ja schon übertragen. All das werden die Gerichte wohl erst nach dem Stichtag klären. Will man 100% sicher gehen, müsste man ansonsten alle externen Inhalte komplett entfernen, speziell sobald Reiz-Begriffe wie Google oder Facebook damit in Zusammenhang stehen. Oder im Prinzip zu jedem Thema eine Art "2-Klicks-für-mehr-Sicherheit" einbauen: "Soll dieses Video angezeigt werden? blabla-Youtube" "Soll diese Anfahrtskarte angezeigt werden? blabla-Googlemaps". Das wäre vom technischen Umsetzungsuafwand her relativer Wahnsinn :-) Aber, kommt bestimmt auch noch. Witzig wäre natürlich so was wie "Soll diese Schriftart geladen werden?", aber irgendwann kommt dann vielleicht auch noch "Soll dieses Framework geladen werden? blabla-CDN"
zu deiner ersten Frage existiert leider noch keine konkrete Antwort. Das wird sich womöglich mit der Zeit ergeben.
Zu deiner zweiten Frage bzgl. Google Maps: Lies dir doch bitte die zwei anderen Antworten an Thierry Minet und Bertram Simon durch. Da haben wir erklärt, was sich in Bezug auf Google Maps empfiehlt. :-)
Viele Grüße
Florian
Wie immer, auch hier unser Hinweis: Da ich kein Jurist bin, stellt dieser Kommentar weder eine Rechtsberatung dar, noch ersetzt er eben diese. Bitte wende dich im Zweifel an einen Rechtsanwalt.
wenn Google Maps zur Darstellung die Schrift "Roboto" verwendet, dann ist der eigentliche Dienst, den man beachten sollte, Google Maps.
Und hier gilt: Bei Google Maps empfiehlt es sich, direkt unter der Funktion "Maps" darauf hinzuweisen, dass auf der Website Google Maps genutzt wird. Außerdem sollte in unmittelbarer Nähe ein Link sein, der auf die Datenschutzerklärung – worin festgehalten wird, dass Google Maps genutzt wird – weiterleitet.
Natürlich ist es sinnvoll und wichtig, auch mit solchen Dienstleistern AV-Verträge zu schließen.
Viele Grüße
Florian
Wie immer, auch hier unser Hinweis: Da ich kein Jurist bin, stellt dieser Kommentar weder eine Rechtsberatung dar, noch ersetzt er eben diese. Bitte wende dich im Zweifel an einen Rechtsanwalt.
Und was ist mit eingebetteten Inhalten, wie u.a. Google Maps und YouTube Videos?
durch bspw. jQuery oder Libraries kommt es automatisch zur Übermittlung von personenbezogenen Daten (z.B. IP-Adresse). Deshalb empfiehlt es sich, diese selbst zu hosten.
Bei Google Maps ist es besser, wenn du direkt unter der Funktion "Maps" darauf hinweist, dass hier Google Maps genutzt wird. Außerdem sollte in unmittelbarer Nähe ein Link sein, der auf die Datenschutzerklärung – worin festgehalten wird, dass Google Maps genutzt wird – weiterleitet.
Natürlich empfiehlt es sich, auch mit solchen Dienstleistern AV-Verträge zu schließen. ;-)
Viele Grüße
Florian
Auch hier unser Hinweis: Da ich kein Jurist bin, stellt dieser Kommentar weder eine Rechtsberatung dar, noch ersetzt er eben diese. Bitte wende dich im Zweifel an einen Rechtsanwalt.
danke für dein Feedback.
Link ist nun drin. :)
Oder direkt hier klicken: https://fonts.google.com/
Viele Grüße
Jan von Mittwald
Konnte das nicht so klar finde...
ich gehe davon aus, dass das rechtlich kein Problem ist, denn die Google Webfonts haben eine SIL Open Font License, die das Herunterladen erlaubt.
Google sagt dazu selbst:
Sollte ich Schriften auf dem Server meiner eigenen Website hosten?
Wir empfehlen, die Code-Snippets, die auf der Registerkarte "Einbetten" in der Auswahlleiste verfügbar sind, direkt in das HTML und CSS Ihrer Website zu kopieren.
Mehr dazu hier: https://developers.google.com/fonts/faq
Viele Grüße
Jan von Mittwald
Ps. Keine Rechtsberatung! Im Zweifelsfall einen Anwalt kontaktieren.
am besten wäre es, wenn du deine Seite, auf der du die Fonts einbinden möchtest bzw. eingebunden hast, uns per Ticket schickst. Somit können wir das individuell für dich klären. :)
Hast du denn dein http/2 (SSL) an und hast du dieses am Anfang deiner CSS-Datei eingebunden?
Beste Grüße
Kristina
Hinweis: Dieser Kommentar stellt weder eine Rechtsberatung dar, noch ersetzt er eben diese. Bitte wende dich im Zweifel an einen Rechtsanwalt.
wie jedes andere Asset müssen Fontdateien auf den Computer eines Site-Besuchers heruntergeladen werden, bevor sie angezeigt werden können. Schriftarten, die von der Google Fonts-API bedient werden, werden automatisch für einen schnelleren Download komprimiert und nach dem Herunterladen werden sie im Browser zwischengespeichert und von jeder anderen Webseite wiederverwendet, die die Google Fonts-API verwendet.
Da die Google Fonts-API immer häufiger verwendet wird, ist es wahrscheinlich, dass Besucher Ihrer Website oder Seite bereits Google-Fonts in Ihrem Design im Browser-Cache verwenden.
Im Allgemeinen sollte man sich der Größe der Schriftartdateien bewusst sein, die auf der Website oder Seite bereitgestellt werden. Wir empfehlen, nur die benötigten Font-Familien, Stile und Skripts einzubetten. Die Seitenladezeit-Anzeige oben rechts in der Auswahlleiste (bei Google Fonts) zeigt eine Schätzung an, wie sich die ausgewählten Fonts auf die Gesamtladezeit (z. B. langsam, moderat, schnell) einer Website, basierend auf der Anzahl der Familien, Stile und Skripts, auswirkt.
Viele Grüße
Jan von Mittwald
Hinweis: Dieser Kommentar stellt weder eine Rechtsberatung dar, noch ersetzt er eben diese. Bitte wende dich im Zweifel an einen Rechtsanwalt.
Natürlich die nur über css eingebunden werden können.
externe Fonts erzeugen i. d. R. einen IP-Eintrag in den Logfiles der Font-Anbieter, daher wird dadurch immer ein personenbezogenes Datum weitergegeben.
Die sichere Variante ist daher die lokale Einbindung in deinen eigenen Webspace.
Grüße
Jan von Mittwald
Hinweis: Dieser Kommentar stellt weder eine Rechtsberatung dar, noch ersetzt er eben diese. Bitte wende dich im Zweifel an einen Rechtsanwalt.
Kommentar hinzufügen