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.
Die DSGVO (Datenschutzgrundverordnung) nimmt auch Webentwickler in ihre Pflicht – seien diese freiberuflich tätig oder in einer Agentur angestellt. Setzt du als Webentwickler Schriftarten von Google Fonts ein, müssen diese mit den Datenschutzrichtlinien der DSGVO vereinbar sein.
Beim Aufruf einer Google Fonts nutzenden Website gelangen Daten zur Identität des Website-Besuchers auf den Google-Server in den USA. Die Kriterien der US-amerikanischen Datenschutzrichtlinien erfüllen jedoch nicht die hohen Ansprüche der hiesigen DSGVO. Wie du dieses Problem geschickt meistern kannst, erfährst du hier.
Google-Fonts-Schriftarten brauchst du nicht vom Google-Server herunterzuladen. Du kannst die Schriften direkt auf dem lokalen Server oder Webspace ablegen, von wo du sie dann einbindest. Mit der hier beschriebenen allgemein umsetzbaren Lösung integrierst du Inhalte auf sämtliche gewünschten CMS (Content-Management-Systeme). Manche Beschreibungen oder Begriffe mögen anders lauten, prinzipiell ähneln sich die Prozesse aber so sehr, dass du mit der Anleitung gut klarkommen wirst.
Falls du nicht weißt, was für Google Fonts für deinen aktuellen Auftrag infrage kommen, stehen dir zur Klärung folgende Optionen offen:
Der Quellcode zeigt dir, aus welchen Quellen heruntergeladene Daten stammen. Genau hier kannst du dich später vergewissern, ob wirklich keine Verbindung zum Google-Server mehr besteht.
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.
Nachdem du deine benötigten Google Fonts ermittelt hast, lädst du sie am besten gleich herunter.
Eine tolle Adresse für das Herunterladen von Schriften und ein kostenloser Service obendrein ist google-webfonts-helper.herokuapp.com von Mario Ranftl. Rund 900 Schriften inklusiv Schnitten und Schriftformaten warten dort schon auf deinen Download.
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.
Das auf deinen Rechner heruntergeladene ZIP-Archiv mit deinen Schriften erscheint in mehreren unterschiedlichen Formaten wie EOT, SVT, TTF, WOFF und WOFF2. Zum Hochladen der Dateien auf deinen Webspace legst du nun das bereits erstellte Verzeichnis – hier also „/fonts“ – an. Anschließend kopierst du deine Schriften dort hinein.
Die auf deinem Webspace deponierten Schriftarten brauchst du jetzt bloß noch ins CSS zu integrieren. Das benötigte CSS-Snippet ist im Google-Webfonts-Helper ersichtlich. Über diese CSS-Datei führst du alle erforderlichen CSS-Anpassungen in deiner Datei über einen Editor nach deiner Wahl aus. Hierfür musst du den anfänglichen Code ganz löschen und durch die kopierten CSS-Anweisungen ersetzen. Dann überschreibst du die alte .CSS-Datei mit deiner eben bearbeiteten Datei.
/* 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 */
}
Bald hast du es geschafft! Nun kontrollierst du noch, ob deine Verbindung zum Google-Server auch ganz bestimmt getrennt ist. So bist du auf der sicheren Seite, dass keinerlei Informationen mehr vom lokalen Rechner an Google übermittelt werden.
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.
Pixel Bytes ist Ihr Partner für komplette Webseite-Projekte. Wir unterstützen Sie von der Planung über die Entwicklung bis zur Contenterstellung.
Visitenkarte im Web oder Komplettauftritt für Unternehmen mit allen Raffinessen? Pixel Bytes 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:
