Eigene Google Fonts hinzufügen

Wenn Sie eine Google Font integrieren möchten die im Theme nicht enthalten ist können Sie dies mit Hilfe der folgenden Anleitung realisieren.

Die Schriftarten werden dabei lokal von Ihrem eigenen Server geladen. Das Laden der Schriftarten über Google ist theoretisch auch möglich, bedarf jedoch umfangreicherer Anpassungen. Wenn Sie diese Variante umsetzen möchten senden Sie uns bitte eine Nachricht.

Eine Theme Ableitung (Child Theme) ist Voraussetzung für die Einbindung zusätzlicher Google Fonts. Eine Anleitung zum Erstellen einer Theme Ableitung finden Sie HIER.


1

Datei erstellen

Erstellen Sie mit einem Editor eine Datei mit dem Namen  all.less

In dieser Datei werden später die nötigen Anpassungen eingefügt.

Eine fertige Datei für die Integration der Schriftart „Allan“ stellen wir Ihnen als Beispiel bereit. (Download)

2

Google Font wählen

Besuchen Sie die Google Fonts Seite und suchen Sie nach Ihrer gewünschten Schriftart.

1. Klicken Sie auf das Plus-Zeichen neben der Schriftart

2. Im Anschluss erscheint unten rechts ein Tab. Klicken Sie den Tab an um ihn zu öffnen und die benötigten Informationen angezeigt zu bekommen.

3. Kopieren Sie den Code aus dem Abschnitt „Specify in CSS“.

4. In der Beispieldatei all.less ersetzen Sie den vorhandenen Code in den Klassen „body“ und „h1, h2, h3, h4, h5, h6“ mit dem eben kopierten Code.

Die Klasse „body“ definiert die Schriftart für den Standard-Text im Shop. die Klasse „h1, h2, h3, h4, h5, h6“ die Überschriften. Wenn Sie eine der Klassen nicht mit einer eigenen Google Font überschreiben möchten löschen Sie diese einfach.

3

Schriftart herunterladen

Mit dem kostenlosen Dienst „ google-webfonts-helper“ von Herokuapp können Sie die Google Fonts komfortabel herunterladen.

1. Besuchen Sie die „google-webfonts-helper“ Seite (Link) und suchen Sie nach Ihrer Schriftart.

2. Wählen Sie bei Punkt 2 die benötigten Styles aus.

3. Kopieren Sie den unter Punkt 3 angezeigten CSS Code.

4. Ersetzen Sie in der Beispieldatei all.less den Code ab Zeile 9 (siehe Bild unten) mit dem eben kopierten CSS Code.

5. Laden Sie die ZIP-Datei mit der Schriftart unter Punkt 4 herunter.

4

Dateien hochladen

Im letzten Schritt müssen die Dateien noch auf Ihren Server/Webspace hochgeladen werden.

1. Verbinden Sie sich mit Hilfe eines FTP-Programms mit Ihrem Server/Webspace und öffnen Sie das Shopware-Hauptverzeichnis.

2. Laden Sie die fertig angepasste all.less Datei in das folgende Verzeichnis hoch: /themes/Frontend/IhrChildTheme/frontend/_public/src/less

3. Entpacken Sie das ZIP-Archiv mit der heruntergeladenen Schriftart und laden Sie die enthaltenen Dateien in das folgende Verzeichnis hoch: /themes/Frontend/IhrChildTheme/frontend/_public/src/fonts (Sollte das „fonts“ Verzeichnis noch nicht vorhanden sein legen Sie es an).

4. Leeren Sie den Shopware und Browser Cache.

Wurden alle Schritte korrekt ausgeführt sollte die neu integrierte Schriftart beim Neuladen Ihres Shops angezeigt werden.

War dieser Artikel hilfreich für Sie? Vielen Dank für Ihr Feedback. Es gab ein Problem bei der Übermittlung des Feedbacks. Bitte versuchen Sie es erneut.

Sie benötigen weitere Hilfe? Kontaktieren Sie uns Kontaktieren Sie uns