Google Fonts lokal einbinden

Sie möchten auf Ihrer Website Google Fonts integrieren um die Vielfalt an unterschiedlichen Schriften zu nutzen? Die «standardmässige» Einbindung von Google Fonts ist zwar sehr einfach und mag das Leben des Developers erleichtern, dennoch sind damit gerate beim Datenschutz Risiken verbunden.

Damit Google die Schriftarten zur Verfügung stellen kann, laden Webseiten mit jedem Seitenbesuch automatisch die Fonts über einen Server von Google aus den USA. Google liest dann im Gegenzug zahlreiche Daten von Webseitenbesuchern aus.

Hier erhalten Sie einen einfachen Tipp, um Google Fonts rechtssicher in Ihre Webseiten einzubinden.

Google Fonts datenschutzkonform verwenden

Schritt 1: Google Fonts im Google Webfonts Helper
Rufen Sie den Google Webfonts Helper auf. und suchen Sie hier nach Ihren Google Fonts bzw. der Schriftart, welche Sie auf Ihrer Website einbinden möchten. Wählen sie den Zeichensatz und die benötigten Schriftstile aus.

Schritt 2: Dateien herunterladen /hochladen auf Ihren Server
Legen Sie hierzu am besten innerhalb Ihres Template-Ordners einen Ordner “fonts” an und laden Sie mittels «Download files» die Schriftfiles in diesen Ordner. Entpacken Sie anschliessend dieses heruntergeladen File und laden Sie das erstellte Verzeichnis /fonts per FTP auf Ihren Webserver hoch.

Schritt 3: CSS-Code anpassen
Kopieren Sie den erstellten CSS-Code. Dieser Code enthält alle notwendigen Details zur Schriftart und sorgt dafür, dass Sie diese – wie von Ihnen ausgewählt, auf Ihrer Website nutzen können. Unter dem Punkt “Customize folder prefix (optional)” sollten Sie am besten direkt auch den entsprechenden Pfad hinterlegen, über welchen die Fonts auf Ihrem Server abgelegt werden.

Editieren Sie anschliessend ihre CSS-Datei und fügen Sie den CSS-Code ein.

/* varela-round-regular - latin */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/varela-round-v19-latin-regular.woff2') format('woff2'),
       url('fonts/varela-round-v19-latin-regular.woff') format('woff'); 
}

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/montserrat-v25-latin-300.woff2') format('woff2'), 
       url('fonts/montserrat-v25-latin-300.woff') format('woff'); 
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/montserrat-v25-latin-regular.woff2') format('woff2'), 
       url('fonts/montserrat-v25-latin-regular.woff') format('woff'); 
}

Prüfen Sie anschliessend auf Ihrer Website ob das reibungslos funktioniert hat und Ihre Texte nun mit der lokalen Google-Font dargestellt werden.