Schriften lokal einbinden
Anleitung zum lokalem Einbinden von Google Fonts
Last updated
Anleitung zum lokalem Einbinden von Google Fonts
Last updated
Diese Anleitung kann für Google Fonts und andere eigene Schriften genutzt werden.
Für diese Anleitung ist die Verwendung eines Child-Themes nicht notwendig.
Solltest Du ein Child-Theme einsetzen wollen, verwende die Anleitung zur Einbindung mit Child-Theme.
Anstatt die Schriften vom Google Server zu laden, kannst Du diese auch lokal auf dem eigenen Server ablegen und einbinden. Du kannst diese Anleitung auch nutzen, um eigene Schriften in Deinen Shop einzubinden.
In dieser Anleitung werden die Schriften in den public-Ordner Deiner Installation hinterlegt.
Um die Schriften als Webfonts von Google Fonts herunterladen zu können, kannst Du den kostenlosen Dienst von Herokuapp nutzen.
Gib den Namen der gewünschten Schriftart (in diesem Beispiel ist es Raleway) in der Suche (1) ein, und wähle die Schriftart aus den Vorschlägen (2) aus.
Die Schriftschnitte (3) der Schriftart kannst Du daraufhin anhaken.
Lege lokal eine CSS-Datei mit dem Namen der Schriftart, z.B. raleway.css an und Kopiere den CSS-Code aus dem grauen Kasten in diese Datei hinein.
Verbinde Dich per FTP-Client mit Deinem Onlineshop und navigiere in den Ordner {root}/public/css. Lade die raleway.css Datei in den css-Order Deiner Shopware 6 Installation.
Öffne in der Administration Deines Shopware Shops die Einstellungen (Plugin/App Konfiguration) unter Erweiterungen > Meine Erweiterungen > Tab: Themes > Theme [Variante] > Kontextmenü: Konfiguration
Aktiviere Eigene CSS Dateien aktiv (1) und füge in das Textfeld (2) den Link zur CSS-Datei ein. Ressourcen in den public-Ordner Deiner Installation lassen sich mit einem relativen Pfad aufrufen.
Unter Schritt 4 - Download files kannst Du eine Zip-Datei 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 {root}/public/fonts-Ordner Deiner Shopware Installation.
Zu allererst muss dem Theme mitgeteilt werden, dass die eingetragenen Schriften nicht mehr von den Google Servern geladen werden soll. Deaktiviere dazu den Haken bei Lade Schriften von Google (1).
Trage den Namen der Schriften, z.B. 'Raleway', sans-serif inklusive der generischen Schriftfamilie in die Felder Schriftart Text (1) und Schriftart Überschrift (2) ein. Schriftart Text und Schriftart Überschrift können hierbei natürlich auch verschiedene Schriftfamilien sein.
Damit die Felder der Custom Schriften (Google Fonts oder selbst gehostet) verwendet werden, müssen in den Felder Schriftart Text (5) und Schriftart Überschrift (6) auf den Wert --- Verwende 'Eigene Schriftarten' --- gestellt werden.
Die Schriftstärken (3, 4) müssen hierbei nicht angegeben werden, da diese im CSS-Code aus Schritt 3 hinterlegt werden und nur zum Laden über die Google Server verwendet wurden.
