Google Webfonts sicher nutzen (DSGVO)

Durch das Einbinden von Google Fonts kann die Palette an Web-Schriftarten einfach und kostenlos erweitert werden. Um eine neue Schriftart zu verwenden bietet Google eine eigene API via CSS Dateien an.

<link href="https://fonts.googleapis.com/css?family=Arvo:400,700" rel="stylesheet">

Im Anschluss kann ich z.B. die Schriftart Arvo nun in meiner eigenen CSS Datei ganz normal verwenden.

font-family: 'Arvo', serif;
font-weight: 700;

DSGVO Variante link

Bei jedem Aufruf der Webseite lädt der Besucher nun die Schriftart von Googles Server herunter und hinterlässt dort Daten. Um der Datenschutzgrundverordnung gerecht zu werden, muss erklärt werden das Google Daten bekommt und wie diese damit umgehen.

Der dahintersteckende Aufwand kann vermieden werden, wenn die Schriftart über den eigenen Server mit der Webseite ausgeliefert wird. Der Google Webfonts Helper hilft dabei alle nötigen Schritte durchzuführen.

Google Webfonts Helper

Nach der Auswahl einer Schriftart zeigt er mir den nötigen CSS Code an, um die Schrift vom eigenen Server zu laden:

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

Im letzten Schritt kann ich die Schriftdateien auch direkt als Zip Datei herunterladen und diese in mein Font Verzeichnis entpacken.

Google Webfonts Download

Webpack link

Falls für das Bauen der Webseite Webpack zum Einsatz kommt, gibt es hier das Google Fonts Webpack Plugin. Beim Bauen werden die definierten Google Fonts automatisch heruntergeladen und zur Verfügung gestellt.