Fonts lokal hosten

Wir zeigen Dir hier, wie Du Schriften lokal einbinden kannst am Beispiel von Google Fonts. Diese Anleitung kannst Du auf unsere Themes und Plugins anwenden.

Anstatt die Schriften vom Google Server zu laden, kannst Du diese auch lokal auf dem eigenen Server ablegen und einbinden. Diese Anleitung bezieht sich auf unsere Themes wie auch unsere Plugins Angebote Sales Countdown Banner, Nachrichten & Hinweise Leiste, Google Schriften / Fonts Changer.

Einfache Einbindung

1. Verbindung zur Google API kappen

Als erstes stelle sicher, dass keine Schriften von einem anderen Server wie z.B. Google geladen werden. Entferne dazu einfach den Link in der jeweiligen Konfiguration des eingesetzten Themes oder Plugins.

Prüfe auch die anderen Felder, welche link-Tags enthalten könnten.

2. Schriften aussuchen

Nun geht es darum die Schriften selbst zu hosten. Dazu müssen die Schriftarten erst einmal heruntergeladen werden. Um die Schriften von Google Fonts herunterladen zu können, kannst Du den kostenlosen Dienst von Herokuapp nutzen.

google webfonts helper

Gib den Namen der gewünschten Schriftart in der Suche (1) ein, und wähle die Schriftschnitte (2) aus, die Du in Deinem Theme oder Plugin verwenden möchtest.

Das Schriftgewicht (2) solltest Du entsprechend Deiner eingestellten Theme- bzw. Plugin-Konfiguration auswählen.

3. CSS einfügen

Der CSS-Code aus dem Schritt 3 der google-webfonts-helper Anleitung muss in Deinem Shop geladen werden. Verbinde Dich daher mit einem FTP-Programm mit Deinem Server und gehe in das Stammverzeichnis Deiner Shopware 5 Installation.

Lege hier einen Ordner mit dem Namen fonts an.

Bevor Du den Code kopierst, passe die Pfade der Urls an. Dazu kannst Du das sogenannte Prefix (1) im Eingabefeld herauslöschen. Die Pfade im CSS-Code passen sich automatisch an.

Lege eine CSS-Datei mit dem Namen der Schriftart, z.B. raleway.css an und Kopiere den CSS-Code in diese Datei.

Lade die raleway.css Datei in den soeben erstellten fonts-Order auf Deinem Server.

4. Schriften auf den Server laden

Unter Schritt 4 "Download files" kannst Du eine Zip-Datei (1) der Schriften herunterladen.

Entpacke das heruntergeladene ZIP-Archiv mit den Schriften auf Deinem Computer und lade die einzelnen Schrift-Dateien per FTP-Client in den zuvor erstellten font-Ordner. Das ganze sollte nun wie folgt aussehen.

5. Theme Konfiguration anpassen & kompilieren

Damit die Schriften nun geladen werden, muss die CSS-Datei raleway.css mit dem Theme bzw. Plugin aufgerufen werden. Das CSS sollte sich nun mit Deiner Domain aufrufen lassen. z.B. https://www.deine-domain.de/fonts/raleway.css

Zum Einbinden der fonts.css muss ein HTML <link>-Tag mit der Url erstellt werden.

<link href="https://www.deine-domain.de/fonts/raleway.css" rel="stylesheet">

Füge diesen Link nun in die markierten Felder Deiner Theme- oder Plugin-Konfiguration ein. (Nutzt Du ein uns dieselbe Schrift in mehreren Plugins, muss der <link>-Tag nur einmalig eingegeben werden.)

Verfahre so mit jeder weiteren Schriftart.

Fortgeschrittene Einbindung

Die Anleitung für Fortgeschrittene sieht leichte Kenntnisse in der Theme-Bearbeitung von Shopware vor und das Vorhandensein eines Child-Themes:

Anstatt die Schriften vom Google Server zu laden, kannst Du diese auch lokal auf dem eigenen Server ablegen und einbinden.

1. Verbindung zur Google API kappen

2. Schriften herunterladen

Um die Schriften von Google Fonts herunterladen zu können, kannst Du den kostenlosen Dienst von Herokuapp nutzen.

Gib den Namen der gewünschten Schriftart in der Suche ein, und wähle die Schriftschnitte aus, die Du in Deinem Shop verwenden möchtest.

Die Schriftfamilien müssen mit den definierten Schriften der Theme-Konfiguration übereinstimmen.

3. Schriften auf den Server laden

Falls Du keine Ableitung des Themes in Form eines Child-Themes besitzt, erstelle Dir eine Ableitung nach dieser Anleitung oder verwende die Einbindung ohne Child-Theme.

Entpacke das ZIP-Archiv mit den Schriften und lade die Fonts per FTP-Client in den Schriften-Ordner Deiner Theme-Ableitung. Du findest den Ordner unter /themes/Frontend/DeinChildTheme/frontend/_public/src/fonts

4. CSS einfügen

Nun fehlt nur noch der erzeugt CSS-Code aus Schritt 3 des Dienstes. Erstelle Dir zunächst eine Datei mit dem Namen all.less, falls diese in Deinem Child-Theme noch nicht vorhanden ist. Die Datei gehört in den Ordner /themes/Frontend/DeinChildTheme/frontend/_public/src/less. Hinterlege in dieser Datei den CSS Code aus Schritt 3 - Copy CSS.