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.
Last updated
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.
Last updated
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
Vergiss nicht im Theme unter Typografie & Farben > Schriftbild die ausgewählten Schriftschnitte anzugleichen.
