Google Fonts DSGVO-konform einbinden: So geht es!

Google Maps auf der Webseite ist ein praktisches Tool für Kunden oder Gäste: Auf der Karte sehen alle Interessierten, wo Ihre Filiale oder Ihr Firmensitz liegt. Das schafft Vertrauen und bietet Komfort, etwa bei der Navigation zu Ihnen. Damit Sie Google Maps einbinden können, benötigen Sie einen API-Key. Warum das? Google berechnet für den Service (ab einer bestimmten Anzahl an Aufrufen) eine geringe Gebühr. Mit dem Key ist es möglich, die Zugriffe zu erfassen. Daher ist die Einbindung verpflichtend.

Aber wie gelingt das? Wer nur wenig Erfahrung mit HTML besitzt, steht möglicherweise vor einer Herausforderung. Mit den Informationen auf dieser Seite ist die aber schnell gelöst.

Zum Auffinden der Datei im Template deiner Website recherchiert du nun in der CSS-Datei nach einem speziellen Code, der diesem Code-Aufbau entspricht:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Wie du siehst, wurde in diesen Code die Schriftart „Roboto“ eingebunden. Nutzt du eine andere Schriftart, taucht im Code nach „?family“ die entsprechend andere Schriftartbezeichnung auf. Tipp: Lade dir das vollständige Google-Font-Verzeichnis mit deinem Template auf deine Festplatte herunter. Nach dem Öffnen mit einem beliebigen Editor suchst du nach:

@import url('https://fonts.googleapis.com/css2?family=

Du wirst fündig werden. Die .css-Datei merke dir bitte gut.

Gut zu wissen: Bei manchen Browsern – beispielsweise Safari – eignet sich der Bereich „Netzwerk“ besser. Dort lässt du dir nur die Schriften anzeigen und erkennst sofort die Domain, an die die Anfrage läuft.

Zum Download trägst du in das Suchfeld einfach deine gewünschte Schriftart ein, zum Beispiel „Roboto“. Über die Punkte 1 und 2 wählst du Zeichensätze und Schriftschnitte, beispielsweise „Roboto“, FontWeight-Variante 100. Anschließend erscheint auf Punkt 3 das CSS-Snippet, über das du später die Schrift in deine zu bearbeitende Website einbindest.

Achtung: Standardmäßig ist das Server-Verzeichnis „/fonts“ bereits voreingestellt. Möchtest du die heruntergeladenen Schriften woanders ablegen, solltest du schon jetzt dein ausgewähltes Verzeichnis anpassen. Andernfalls bliebe es dir nicht erspart, es später immer wieder an unterschiedlichen Orten im CSS anzupassen.

Nun lädst du dir deine persönliche Schriftauswahl via Punkt 4 als ZIP-Archiv herunter.

Falls du auf einer Website verschiedene Schriftarten verwenden möchtest, wiederholst du das Procedere beliebig oft entsprechend dem hier erläuterten Beispiel für die Schriftart „Roboto“. Besitzt du einen GitHub-Account? Dort kannst du Mario Ranftl für seinen hilfreichen Service als Dankeschön eine positive Bewertung hinterlassen.

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

Suche dazu die Developer-Tools bei Chrome beziehungsweise Firefox auf. Unter „Quellcode“ kannst du dich davon überzeugen, dass die Schriftart-Datei unmittelbar von deinem Server geladen wird statt vom Google-Server. Werden anstelle der vormals angezeigten Google-Server-Verbindungen jetzt ausschließlich die lokalen Schriften angezeigt, ist das der Beweis für deine erfolgreiche und DSGVO-konforme Einbindung der Schriften.

Visitenkarte im Web oder Komplettauftritt für Unternehmen mit allen Raffinessen? Ultrapixel aus Hagen realisiert beides. Wir freuen uns, auf eine lange Erfahrung zurückblicken zu dürfen. In dieser Zeit haben wir bereits mit folgenden Kunden zusammengearbeitet: