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:


Beitrags Info:

zuletzt aktualisiert am 19. August 2022 um 8:17

Beitrags Tags:


War dieser Beitrag hilfreich?

Weitere Beiträge zu diesem Thema