cldsi.de — Web Development in Design & Code

Google Fonts DSGVO-konform einbinden

Level: Anfänger
Sprachen: HTML

Noch immer verunsichert die DSGVO einige Entwickler, als auch deren Kunden. Immer wieder hört man, dass Website-Betreiber abgemahnt werden, weil sie Google Fonts nutzen.

Das liegt daran, dass Nutzerdaten, wie zum Beispiel die IP zwangsläufig an die Server von Google weitergeleitet werden, welche wahrscheinlich in den USA stehen, wenn eine Google Font eingebunden ist.

Dafür gibt es aber eine ganz simple Lösung. Anstatt die Schrift einfach über den von Google vorgegebenen Weg einzubetten, laden wir diese herunter:

Noch einfacher funktioniert das mit diesem Tool.

In unserem Beispiel wird die Schrift dann als Ordner heruntergeladen. Darin befinden sich nun alle verschiedenen Stile der Schriftart (wenn wir vorher nicht unter „Customize“ nur bestimmte Stile ausgewählt haben):

Diese müssen nun auf den Server hochgeladen werden, am besten in einen Ordner wie assets/fonts.
Nun müssen die Schriften nur noch im Stylesheet (vor allen anderen Styles) eingebunden werden:

@font-face {
  font-family: Roboto-Light;
  src: url(assets/fonts/Roboto-Light.ttf);
}

Ich binde hier nur die Robot-Light ein. Solltest du mehrere verschiedene Schriftarten oder Schriftstile verwenden wollen, musst du diese alle einzeln einbinden.

Abschließen benutzen wir die Schrift (hier richten wir auch ein Fallback ein, falls der Browser die Schrift nicht benutzen kann oder sie falsch rendert):

body {
  font-family: 'Roboto-Light', Fallback, sans-serif;
}

Solltest du bereits Google-Fonts nutzen, kannst du auch einfach das bereits eingebundene Stylesheet herunterladen, auf deinen eigenen Server laden und dann die URL anpassen.

Google verbietet dies, soweit ich herausgefunden habe, nicht.

✔︎✔︎✔︎✔︎✔︎