Persönliche Beratung
Jahrelange Erfahrung
Exzellente Betreuung

Fonts einbinden

Allgemeine Informationen

Sie haben in Ihrem Theme die Möglichkeit zwei unterschiedliche Schriften einzubinden. Hierzu gehen Sie in die Theme Einstellung unter: Allgemein > Typografie. Die Einbindung der Schriften kann auf zwei unterschiedlichen Methoden, remote und lokal (empfohlen), erfolgen. Diese werden nachfolgend mit den Google Fonts erklärt.

Infos zum Update auf die Pro Version 2.1.4 und Cloud 1.0.8

Mit dem Update auf die Pro Version 2.1.4 bzw. Cloud Version 1.0.8 haben Sie die Möglichkeit Schriften lokal oder remote einzubinden. Beachten Sie unbedingt, dass Sie nach dem Update in die Theme Einstellungen gehen müssen und in das Feld "Schriftart Text" und "Schriftart Überschrift" unbedingt folgenden Eintrag hinzufügen und abspeichern:

'Inter', sans-serif

Danach können Sie eine andere Schriftart mit Hilfe der beiden Methoden einbinden. Die Schrift "Inter" ist die Standard Schriftart von Shopware

Fonts per remote vom Google Server laden

Die einfachste und schnellste Methode ist die Einbindung der Schriften per remote. Hierzu laden Sie die Schriften direkt von den Google Servern. Gehen Sie hierzu auf die Seite von Google Fonts und wählen dort eine entsprechende Schrift aus:

WICHTIG: Bitte Überprüfen Sie, ob ein zusätzlicher Hinweis in Ihren Datenschutzerklärung bzgl. der Verwendung von Google Fonts notwendig wird! Suchen Sie im Zweifelsfall eine Rechtsberatung auf.

Wählen Sie z.B. die Schriftart mit dem Namen "Noto Sans Vai". Kopieren Sie sich den vollständigen Namen und gehen in die Theme Einstellungen: Allgemein > Typografie. Dort fügen Sie ihn anstelle der derzeitigen Schrift ein. In unserem Fall wäre es "Inter".

INFO: Achten Sie darauf, dass die Schrift immer zwischen den Hochkomma steht!

Fonts einbinden

Fonts einbinden

Damit die Schrift von dem Google Server geladen werden kann, muss die Einstellung "Google Fonts automatisch laden" auf aktiv gesetzt werden.

Fonts lokal vom eigenen Server laden

Die unabhängigste Methode ist die Einbindung einer Schrift auf ihrem eigenen Server. Somit sind Sie unabhängig von Google. Ihre Schrift wird immer geladen, egal ob Google die Schrift von dem Google Server entfernt oder dieser gerade nicht erreichbar ist. Diese Methode wird daher empfohlen.

INFO: Sollten Sie eine eigene Schrift oder von einem anderen Anbieter verwenden, können Sie diese ebenfalls auf die gleiche Art und Weise einbinden.
INFO: Die nachfolgende Anleitung ist für Kunden mit einem eigenen Server geschrieben. Kunden welche die Cloud Version nutzen, benötigen eine separate Erweiterung.

Schriften suchen und herunterladen

Wir verwenden für unser Beispiel die Schriftart "Roboto Condensed" von der Google Fonts Seite. Um die Schriftarten herunterzuladen, empfehlen wir den kostenfreien Dienst von google-webfonts-helper. Suchen Sie hier nach der Schrift und klicken diese an. Sie können für die Suche die linke Navigationsleiste oder das Suchfeld verwenden.

Fonts einbinden

Fonts einbinden

Fonts einbinden

Auf der Seite haben Sie unter dem Punkt 2 "Select styles:" die Möglichkeit die Strichstärken zu wählen. Hier können Sie z.B. "regular" für die normale Strichstärke und "700" für bold verwenden. Weitere Strichstärken sind selbstverständlich möglich.

Unter Punkt 3 "Copy CSS" können Sie die Einstellung Customize folder prefix (optional)- Einstellung "../fonts/" so übernehmen. Anschließend klicken Sie nur noch auf den Button bei Punkt 4 "Download files", um die Schrift auf ihren Rechner zu laden.

Upload auf FTP und Einbindung

Entpacken Sie die gerade heruntergeladenen Schriftart und Laden diese über ihren FTP in folgendes Verzeichnis hoch: public/fonts/

Anschließend müssen Sie eine CSS-Datei erstellen. Benennen Sie die Datei wie folgt: fonts.css
Auf der Seite google-webfonts-helper unter Punkt 3 "Copy CSS" finden Sie die Anweisungen, welche Sie in die CSS Datei kopieren müssen. Laden Sie anschließend die Datei in folgendes Verzeichnis hoch: public/css/

INFO: Achten Sie auf die korrekte Anweisung bei "font-style". Standardmäßig wird immer der Wert "normal" verwendet.

Fonts einbinden

Fonts einbinden

Fonts einbinden

Gehen Sie jetzt in die Theme Einstellungen und wechseln in den Tab: Weiteres > CSS Code oder Dateien und tragen in dieses Feld den Pfad zu ihrer angelegten CSS-Datei ein.

<link rel="stylesheet" href="/css/fonts.css">

Wechseln Sie anschließend in den Tab: Allgemein > Typografie und tragen in die Felder "Schriftart Text" und/oder "Schriftart Überschrift" die neue Schriftart ein.