Google Fonts lokal einbinden

Manche Zen Cart Templates verwenden Google Fonts, eine bequeme Lösung, um auch mal etwas stylishere Schriftarten im Shop verwenden zu können.
Wenn die Google Fonts via Google CDN eingebunden werden, besteht höchste Abmahngefahr.
Sollte Ihr Template Google Fonts via Google CDN einbinden, dann stellen Sie das umgehend auf eine lokale Einbindung um.

Ob Ihr Template Google Fonts via Google CDN einbindet, können Sie leicht herausfinden, indem Sie sich den Quelltext Ihrer Shopstartseite ansehen.
Suchen Sie nach:

<link href="//fonts.googleapis.com/

Ein komplettes Beispiel wäre:

<link href="//fonts.googleapis.com/css?family=Open+Sans:300,500,600,700" rel="stylesheet" type="text/css"/>

Hier wird die Schriftart Open Sans in den Stärken 300,500,600 und 700 von den Google Servern eingebunden.

Um diese Schriftart nun auf dem eigenen Server zu hosten und von dort aufzurufen gehen Sie folgendermaßen vor:

1)
Nutzen Sie folgende tolle Website, die Ihnen alles bereitstellt, was Sie benötigen:
https://google-webfonts-helper.herokuapp.com/fonts

Im Suchfeld oben links geben Sie Ihre Schriftart ein, in diesem Beispiel Open Sans
Clicken Sie aufs Suchergebnis.

Auf der nächsten Seite kreuzen Sie beim charset latin an, sollten Sie weitere exotische Sprachen verwenden, auch die entsprechenden anderen.
Normalerweise sollte latin reichen

Darunter kreuzen Sie die Stärken an, die Sie benötigen, in diesem Beispiel waen das 300,500,600 und 700
regular ist ohnhin immer angekreuzt
Kreuzen Sie nur an, was Sie wirklich benötigen

Im Bereich Copy CSS schalten Sie um auf Modern Browsers und kopieren sich dann die angezeigten Definitionen.

Fügen Sie diese Definitionen in eine leere Textdatei ein und speichern Sie sich diese Datei als open-sans.css

Ganz unten auf der Seite gehen Sie nun auf den blauen Downloadbutton und laden sich das zip Archiv herunter

2)

Legen Sie in Ihrem Shopverzeichnis am Server einen neuen Ordner namens assets an.
Das ist nur ein Vorschlag, Sie können den auch anders nennen, es macht aber Sinn für Stylesheets, Fonts oder Javascripts, die man ganz unabhängig von Zen Cart bereitstellen will ein solches Verzeichnis namens assets zu verwenden.

Das ist dann praktisch Ihr eigenes CDN, Sie könnten später auch eine eigene Subdomain anlegen, z.B. https://cdn.meinshop.de, der aufs Verzeichnis assets zielt, um die Inhalte dieses Ordners bei Bedarf auch für andere Ihrer Websites leicht bereitzustellen.

Im Ordner assets legen Sie nun zwei neue Unterordner an:
css und fonts

Laden Sie nun die zuvor abgespeicherte open-sans.css ins Verzeichnis assets/css

Entpacken Sie das heruntergeladene zip Archiv und laden Sie den Inhalt ins Verzeichnis assets/fonts

Die fonts liegen also ohne weitere Unterordner dann direkt im Ordner fonts:

3)

Als letztes entfernen Sie nun den Aufruf des Google Fonts Servers und ersetzen ihn durch Ihren lokalen Link

Ein Zen Cart Template wird für den Aufruf in der Regel folgende Datei verwenden

includes/templates/DEINTEMPLATE/common/html_header.php

Suchen Sie also in dieser Datei nach dem Aufruf, den Sie im Quelltext ja vorhin bereits gefunden haben, z.B.

<link href="//fonts.googleapis.com/css?family=Open+Sans:300,500,600,700" rel="stylesheet" type="text/css"/>

Und ersetzen Sie ihn mit der Adresse zu Ihrem vorhin hochgeladenen Stylesheet open-sans.css im Ordner assets/css, also z.B.

<link href="https://www.meinshop.de/assets/css/open-sans.css" rel="stylesheet" type="text/css"/>

4)

Fertig, die IP Adresse der Besucher wird nun nicht mehr auf Google Server übertragen und ihre Schriftart wird stattdessen lokal eingebunden.

Hinweis für mehrere Schriftarten

Falls Sie mehrere solcher Google Fonts verwenden, dann kombinieren Sie die CSS Definitionen in Ihrem erstellten Stylesheet. Würden Sie z.B. die Fonts Open Sans und Belleza verwenden, dann würde Ihr Stylesheet so aussehen:

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* belleza-regular - latin */
@font-face {
  font-family: 'Belleza';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/belleza-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/belleza-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Und die Belleza Font Dateien kommen genauso ohne jedes Unterverzeichnis in Ihren assets/fonts/ Ordner:


Hinweis für Nutzung von Google Fonts in Google reCaptcha
Aufgrund der aktuellen Abmahnwellen für die nicht-lokale Einbindung von Google Fonts werden verstärkt Scan Tools eingesetzt, die auch bei der Nutzung von Google reCaptcha Alarm schlagen.
Das hat aber nichts mit den Google Fonts Abmahnungen zu tun.
Google reCaptcha lädt für die Funktionalität Google Fonts, das kann auch nicht geändert werden.
Da bei der Nutzung von Google reCatcha ohnehin die IP-Adresse in berechtigtem Interesse übertragen wird und für die Funktionalität auch übertragen werden muss, ist das Laden von Google Fonts irrelevant.
Infos der IT Recht Kanzlei dazu hier:
https://www.it-recht-kanzlei.de/google-fonts-recaptcha-youtube.html
Sie sollten auf jeden Fall auf die Nutzung von Google reCaptcha in Ihrer Datenschutzerklärung hinweisen.


Beitrags Info:

zuletzt aktualisiert am 6. Dezember 2022 um 10:43

Beitrags Tags:


War dieser Beitrag hilfreich?

Weitere Beiträge zu diesem Thema