DSGVO und Google-Fonts

dsgvo-und-google-fonts
DSGVO und Google-Fonts

Wir schreiben 2022 - eine neue DSGVO-Abmahnwelle zu Google-Fonts rollt durch Österreich und Deutschland. Mit der richtigen Einbindung von Google-Fonts kann man nicht nur den DSGVO-Richtlinien entsprechen, sondern auch die Website beschleunigen.

Google-Fonts korrekt integrieren

Wer die beliebten Gratisfonts von Google auf Websites einsetzt, sollte kontrollieren, wie sie eingebunden sind. Findet eine direkte Verlinkung zu Google statt, besteht die Gefahr einer Abmahnung. Dem kann man entgehen, wenn man die Fonts selbst hostet. Dazu lädt man die Schriften runter und integriert sie selbst. Diese Version, ohne Link zu Google, entspricht auf jeden Fall der DSGVO und kein noch so findiger Anwalt kann einen dafür belangen.

Ich gebe hier eine kurze Anleitung wie man die Fonts selbst hosten kann und wie man - wenn man es richtig macht - dabei auch noch seine Website beschleunigen kann.

So kommt ihr schnell und einfach zu den Google-Fonts und den passenden Styles

Als erstes durchsucht man beispielsweise im Developer-Modus des Browsers die Website nach den verwendeten Schriftarten. Diese Schriften suche ich dann bei Google-Fonts und lade sie herunter. Beziehungsweise noch einfacher beim Google-Webfont-Helper von Mario Ranftel.

Dort braucht ihr nur den Fontnamen eingeben. Dann den Schriftschnitt mittels Checkbox auswählen (Standard, kursiv, Gewicht, etc.).

Als nächstes im Feld "Best Support" oder "Modern Browsers" die jeweiligen Font-Formate auswählen. Vorausgewählt ist die umfassendste Formatsammlung: Sie enthält die Schriften in den Formaten von .eot bis .woff2.
Alle modernen Browser unterstützen das stark komprimierte Format .woff2. Wer alte Browser unterstützen muss oder will, sollte die Variante "Best Support" wählen.

Die CSS-Styles aus dem Google-Webfont-Helper in ein eigenes Dokument kopieren und zum Beispiel als fonts.css auf der Website einbinden. Man kann den Dateinamen bereits im Webfont-Helper festlegen. Dadurch werden auch gleich die Links zu den Fonts angepasst. Achtung: die Punkte vor dem Slash müssen der Ordnerstruktur der eigenen Website entsprechen.
Mittels des Download-Buttons werden die gewünschten Schriftschnitte als Zip-File runtergeladen. Diese entpacken und ebenfalls in das Verzeichnis der Website einbinden.

Beispiel zu den font-face-Angaben der Google-Fonts
Styles der Google-Fonts

Zeichenbereiche eingrenzen

Im CSS-Dokument kann man die Unicode Zeichenbereiche eingrenzen, um die Datenmenge zu reduzieren. Wer nicht alle Schriftzeichen benötigt, kann so womöglich einige Kilobytes sparen.

Die Angabefont-display:swapin der Styles Angabe führt zu einem schnellen Wechsel zwischen den Google-Fonts und der Fallbackschrift, die man stets angeben sollte. Ich verwende hierzu eine Systemschrift, die den gewünschten Fonts möglichst ähnlich sieht.

Die sichere Seite der Google-Fonts laut DSGVO

Nachdem man den alten Link zu den Google-Fonts entfernt hat, ist man auf der sicheren Seite und die Website ist in puncto Schriften DSGVO-sicher einsatzbereit.

Performance verbessern

Aber warum, wenn man sich bereits die Finger schmutzig gemacht hat, nicht auch noch die Performance der Website verbessern? Mit einigen kleinen tweaks lassen sich deutliche Erfolge erzielen.

preload

Das Zauberwort heißt preload.
Um die benötigten Google-Fonts schnell einzubinden, sollte man einen Link zu den Fonts am eigenen Server legen.
Eine Performancesteigerung erreicht man, wenn man diese nicht nur per HTML einbindet, sondern auch vorab lädt. Dies erreicht man mit folgender Methode: <link rel="preload" as="font" href="./fonts/xy-font.woff2" crossorigin>

Was passiert hier?

Mit rel="preload" wird dem Browser gesagt, dass ein Element vorab, also bevor es eigentlich gebraucht wird, geladen werden soll.

Die Mitteilung as="font" sagt dem Browser, dass ein Font geladen wird und somit hohe Priorität vorherrscht.

Das moderne stark komprimierte Format .woff2 ist das einzige, das man hier angibt, da nur Browser, die .woff2 verarbeiten können auch den Befehl preload verstehen.

Die letzte Anweisung crossorigin ist erforderlich, da Schriftarten im anonymen Modus CORS abgerufen werden.

Die Links werden im <head> idealerweise noch vor dem CSS eingefügt. Das sieht beispielsweise folgendermaßen aus:

<head>
...
<link rel="preload" as="font" href="./fonts/xy-font.woff2" crossorigin>
<link rel="stylesheet" href="fonts.css">

<link rel="stylesheet" href="main.css">
...
</head>

Fertig ist die Angelegenheit.

Nach DSGVO-konformer Einbindung der Google-Fonts und der Beachtung einiger Regeln konnte ich die bearbeiteten Seiten im Schnitt um 0,4 Sekunden beschleunigen und im Lighthouse-Test die Punktezahl der Performance von 99 auf 100 hochtreiben. Übrigens: preload lässt sich mit Bedacht nicht nur bei Fonts einsetzen.

Links zum Thema:

https://sia.codes/posts/making-google-fonts-faster/

https://google-webfonts-helper.herokuapp.com

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Google-Fonts_selbst_hosten

Für WordPress hat Ernst Michalek eine übersichtliche Anleitung geschrieben: https://www.egm.at/blog/google-fonts-dsgvo-sicher-in-wordpress-einbinden/


weitere Artikel zu HTML:
HTML und Textgestaltung, kbd - Das HTML-Element zu keyboard, Gastautor bei HTMHell zur Navigation

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.