Fonts

Photo by Amador Loureiro on Unsplash

Inhalt

  1. Hintergrund
  2. Warum sind Google Fonts nicht DSGVO Konform?
  3. Wie kann ich feststellen ob eine Webseite Google Fonts dynamisch lädt, und meine IP-Adresse übertragen wird?
  4. Wie kann ich als Website Betreiber Sicherstellen, dass die Schriften meiner Seite DSGVO Konform sind?
  5. Fazit
Hinweis: Dieser Beitrag beschreibt lediglich Verfahren um Google Fonts DSGVO Konform einzubinden, gibt aber keine Auskunft oder Empfehlungen in Bezug auf die Rechtslage.

Hintergrund

Am 20.01.2022 hat das Landgericht München entschieden, dass der Einsatz von Google Fonts auf der Webseite ohne Einwilligung der Nutzer, deren Persönlichkeitsrecht verletzt. Dies bezieht sich auf die gängige Methode der Einbundung von Google Fonts, bei der im Header der HTML Datei die Google Fonts über einen Stylesheet Link eingebunden werden.

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

Beispiel einer typischen Einbindung von Google Fonts

Dieses Verfahren ist sowohl Einfach, als auch Praktisch. Aber es hat in Bezug auf der Datenschutz-Grundverordnung (DSGVO) einen wesentlichen Haken: Durch das Laden der Schriften im Header, wird die IP-Adresse des Besuchers an Google übermittelt, ohne das der Besucher die Möglichkeit hat der Übertragung seiner IP-Adresse einwilligen kann.

Warum sind Google Fonts nicht DSGVO Konform?

Das dynamische Laden der Google Fonts erfolgt in der Regel in zwei Schritten. Im ersten Schritt werden die CSS Definitionen der verwendeten Schriften im Header von Googles fonts.googleapis.com Server geladen. In den CSS Definitionen der Schriftarten stehen die Quellen, von denen die Schriften geladen werden sollen. Im zweiten Schritt werden dann die eigentlichen Schriftdateien wiederum über Googles fonts.gstatic.com Server geladen. In beiden Fällen wird die IP-Adresse des Benutzers an die Google Server in den USA übertragen.

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkWVAexoMUdjFXmQ.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Beispiel einer CSS Schriftart Definition, wie sie von den Google Servern geladen wird, in denen auch die Quelle der Schriftdatei enthalten ist

Laut Aussage von Google wird die IP Adresse zwar ausschließlich verwendet um die Region zu bestimmen, an welche die Schriften ausgeliefert werden, und nicht für Werbe- oder Marketingzwecke misbraucht. Da die IP Adresse aber von der europäischen Untion an die USA übermittelt wird, ist die Aussage von Google in Bezug auf die DSGVO ohne Wert.

Betrifft dies nur Server in der EU?

Nein. Tatsächlich ist die DSGVO definiert worden, um die Rechte von Bürgern der Europäischen Union zu schützen, und das auch, wenn Sie Webseiten von ausländischen Betreibern besuchen. Daher tritt die Persönlichkeitsverletzung in Kraft, auch wenn ein Server außerhalb der EU Google Fonts dynamisch einbindet.

Wie kann ich feststellen ob eine Webseite Google Fonts dynamisch lädt, und meine IP-Adresse übertragen wird?

Um Sicherzustellen, dass man selbst nicht seine IP Adresse an Google preisgibt, kann man relativ leicht feststellen, ob eine Webseite Google Fonts dynamisch lädt.

  1. Kontrolle der Header Links in dem Quelltext der Seite

    Je nach Browser kann man über das Hauptmenü, oder über einen Klick auf die rechte Maustaste innerhalb des Browser-Fensters, den Seitenquelltext aufrufen. Hier kann man in dem Header der Seite (der Bereich in dem Seitenquelltext der mit den <head>...</head> Auszeichungen eingegrenzt ist) schauen, ob dort eine <link> Auszeichnung enthalten ist, die auf den fonts.googleapis.com Server verweist.

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

    Beispiel einer typischen Einbindung von Google Fonts

  2. Kontrolle der geladenen Ressourcen im Netzwerk Protokoll

    In vielen Browsern kann man auch über die rechte Maustaste oder das Hauptmenü, neben der Darstellung des Seitenquelltextes auch Element-Informationen oder Untersuchen aufrufen (Strg-Shift-i oder Alt-Cmd-i auf dem Mac), hierbei sollte im unteren Bereich des Browser-Fensters eine Ansicht der Seiteninhalte mit einem oberen Reiter in dem man neben Elemente/Inspektor auch Konsole oder Netzwerk/Netzwerkanalyse auswählen kann.

    Klickt man auf Netzwerk, werden einem alle geladenen Ressourcen namentlich aufgelistet, mit dem entsprechenden Server (Host/Domain) von dem die Ressource geladen wurde, angegeben ist. Wenn hier fonts.googleapis.com oder fonts.gstatic.com aufgelistet ist, dann ist die Seite nicht DSGVO Konform.

Wie kann ich als Website Betreiber Sicherstellen, dass die Schriften meiner Seite DSGVO Konform sind?

Um eine Abmahnung wegen einer DSGVO Verletzung zu vermeiden, muss nur sichergestellt werden, dass die IP Adresse des Besuchers nicht an die Google Server übermittelt werden.

Die einfachste Möglichkeit wäre natürlich die Google Fonts durch standard Systemschriften zu ersetzten (Helvetica, Arial, sans-serif, etc.), aber damit verliert man natürlich gestalterische Besonderheiten. Daher ist die sinnvollste Methode die bereits verwendeten Google Fonts lokal vom eigenen Server bereitzustellen, wodurch ein Umweg über die Server von Google vermieden wird.

Hinweis: Durch das eigene Hosten von Schriften, wird der Download der Schriften beim Endbenutzer sicherlich etwas langsamer sein, als bei den von Google betriebenen hoch-performanten CDN-Servern, aber dank der intelligenten Browser-Cache Funktionalität, sollte das keinen Bedeuten Unterschied in der Gesamtladezeit der Webseite darstellen.

Das lokale Hosten bei statischen Webseiten

Um die Schriften für das lokale Hosten vorzubereiten, ist es notwendig, dass eine Verbindung zu dem eigenen Server über SSH oder (S)FTP möglich ist, um den letzten Stand der aktuell gehosteten Seiten zur Modifikation herunterzuladen, und um die Schriften und die CSS Anpassungen hochzuladen.

Schrittweise Vorgehensweise

Zum herunterladen der Fonts CSS Definitionen und Schriftdateien in allen gängigen Formaten, gibt es zum Glück schon einige hilfreichen Tools, wobei ich den Google Webfonts Helper, der frei Verfügbar ist, besonders hervorheben möchte. Hier braucht man nur die gewünschten Schriften suchen, auswählen, und kann direkt die richtigen Font CSS Definitionen und alle benötigen Schriftdateien als ZIP Datei herunterladen. Mit diesem Tool kann man direkt die ersten vier Schritte überspringen und direkt mit Schritt 5 weitermachen.

Alternativ kann man natürlich auch die hier beschriebenen ersten vier Schritte abarbeiten, um mit etwas mehr Aufwand das selbe Ergebnis zu erzielen.

  1. Font CSS Definitionen herunterladen: Die URL aus dem Orginal Link der Google Fonts Stylesheets kopieren und direkt im Browser aufrufen (z.B. https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600&display=swap), um die von Google generierten CSS Definitionen lokal zu sepichern. Am besten in dem selben Verzeichnis in dem bereits verwendete CSS Dateien liegen und die Datei fonts.css nennen.

  2. TTF Schriftdatei herunterladen: Auf Google Fonts gehen, die gewünschten Schriften suchen und dann über den Download Button (oben rechts) herunterladen. Am besten immer nochmal kurz die Lizenz der Fonts überprüfen, um sicherzustellen, dass nur frei verwendbare Schriften geladen werden.

  3. TTF Schriftdatei in benötigte Formate konvertieren: Die TTF (True Type Font) Dateien werden nur von einigen Browsern unterstützt, für moderne Browser braucht man mindestens noch Schriftdateien im WOFF (Web Open Font Format) oder WOFF2 Format (die neurere Variante), die Internet Explorer Browser unterstützen auch das EOT Format - Safari, Android, und iOS unterstützen TTF und ältere iOS Versionen SVG.

    Wenn man nach TTF Schriftkonvertierung sucht, findet man einige freite Tools. Einige unterstützen nur das einzelne konvertieren von Schriften, daher möchte ich ein Tool hervorheben: Online Font Converter. Dieses Tool erlaubt das konvertieren von mehreren TTF Dateien in alle benötigten Formate. Wie bei allen guten Open Source Tools, empfehle ich immer von der Möglichkeit, an den Entwickler zu Spenden, gebrauch zu machen, damit das Tool auch weiter gepflegt wird.

  4. Font CSS Definitionen anpassen: Die zuvor heruntergeladene font.css nun in einem Editor öffnen, und das jeweilige src: attribut anpassen um auf die konvertierten lokal gespeicherten Schriftdateien zu verweisen, hierbei ist es wichtig, dass die angegebenen url Pfade nur noch auf die lokal gespeicherten Schriftdateien zeigen. Es können alle vorhandenen Formate aufgelistet werden, der Broswer wählt automatisch das passende Format aus.

     /* latin */
 @font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Kompatibilitätsmodus */
 src: local(''),
     url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6 bis IE8 */
     url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Top moderne Browser */
     url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Moderne Browser */
     url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Älteres iOS */
 }

    Beispiel der Open Sans Schrift, wenn diese im fonts Verzeichnis relativ zu der font.css Datei gespeichert ist

  5. Font CSS in den eigenen HTML Seiten einbinden: Nun muss die neue font.css, anstatt der vorherigen Google API integration eingefügt werden. Hierzu den Link auf die fonts.googleapis.com mit folgendem link ersetzten:

     <link href="./css/fonts.css" rel="stylesheet">

    Beispiel eines relativen Pfades wenn die CSS Dateien in einem entsprechenden Unterordner liegen

  6. Font CSS, Schriftdateien und aktualisierte HTML Dateien hochladen: Nun müssen die fonts.css Datei, zusammen mit den Schriften und den angepassten HTML Dateien per FTP auf den Live Webserver kopiert werden. Hier dabei darauf achten, dass die Ordnerstrucktur und die relativen Pfade passen, damit die Dateien auch von dem Webserver gefunden werden.

  7. Testen und Fertig: Wenn alle Dateien korrekt übertragen wurden und die Pfade stimmen, dann sollte die Seite wieder wie zuvor aussehen, auch wenn es eventuell eine leichte Verzögerung beim Laden der Schriften gibt. Ob die neuen lokal gehosteten Schriften korrekt geladen werden, kann man wieder über die Element Informationen - Strg-Shift-i oder Alt-Cmd-i auf dem Mac - der Seite überprüfen und ich der Netzwerk Ansicht sicherstellen, dass alle Resourcen erfolgreich geladen wurden und keine Zugriffe mehr auf Google Server stattfinden.

Das lokale Hosten bei Wordpress-basierten Webseiten

Für Wordpress Seiten kann natürlich auch das oben beschriebene Verfahren verwendet werden, um das Wordpress Theme zu bearbeiten, aber es geht auch noch einfacher: Bei CMS Systemen wie z.B. Wordpress gibt es bereits Plugins, die das lokale Hosten von Google Fonts automatisch unterstützen und lediglich Installiert und Konfiguriert werden müssen. Ein gutes Beispiel von solch einem Plugin ist OMGF, welches automatisch verwendete Google Schriften erkennt und diese lokal im Wordpress Cache ablegt, so dass zukünftige Zugriffe nur noch auf den lokalen Cache zugreifen.

Fazit

Das Verfahren zum Austausch der dynamischen geladenen Google Schriften ist nicht ohne Aufwand, aber zum Glück muss dieser nur einmal betrieben werden, und dafür ist man dann auf einer Rechtssicheren Seite und muss keine Abmahnungen befürchten, daher lohnt sich der Aufwand.

Der Erfolg der Google Fonts mit über 900 freien Schriftschnitten zeigt sich mit seinen über 66 Billionen Zugriffen. Die neue rechtslage erfordert zwar ein Umdenken, wird aber an dem Erfolg wohl keinen Abriss erzwingen. Aber trotzdem sollte man überlegen, in wie Weit der Einsatz von nachgeladenen Schriftdateien sinnvoll ist, und wann der Einsatz von Systemschriften ausreicht, auch wenn Internet-Verbindungen immer schneller werden, unnötiges Laden von zusäztlichen Resourcen trägt im Endeffekt auch zu einer negativen CO2 Bilanz bei.

Wer also seinen Besuchern schnell ladende Webseiten anbieten will und auf unnötigen Einsatz von zusätzlichen Schriftdateien verzichtet, tut gleichzeitig auch etwas für die Umwelt, und minimiert mit dem verrigerten Rechenbedarf auch den CO2-Fußabdruck.