Fonts lokal einbinden

Wie du eigene Fonts oder Google Fonts selber hostest bzw. lokal auf deinem Webserver hinterlegst und dann in deinen Shopware 6 Shop (self-hosted) einbinden kannst, erfährst du in diesem Artikel.

Vorwort

Damit du die Font-Dateien und die entsprechenden CSS-Anpassungen problemlos hinterlegen kannst solltest du eine separate Erweiterung (Plugin oder App) für individuellen Anpassungen nutzen.

• Prüfe ob es im Shopware Community Store bereits eine passende Erweiterung gibt.

• Alternativ kannst du die folgende manuelle Methode nutzen.

Der einfachste Weg ist die Dateien im Ordner "public" deiner Shopware Installation bereitzustellen.

In unserem Beispiel möchten wir den Google Font "Titillium Web" für Text und Headlines in einer Strichstärke von "400" und "600" nutzen. Um die Schriftarten herunterzuladen, empfehlen wir den kostenfreien Dienst .

1. Suche oben links nach der gewünschten Schrift und wähle diese aus (z.B. "Titillium Web").

2. Gebe unter "2. Select styles" die benötigten Strichstärken an. (z.B. regular/400 und bold/600)

3. Als Ordner-Präfix unter "3. Copy CSS" kannst du es bei "../fonts/" belassen.

1. Entpacke das ZIP-Archiv und lade die Fonts per FTP in den Ordner "fonts" hoch Ordnerpfad: public/fonts/

2. Wechsel in den Ordner "css" und erstelle die Datei "fonts.css" Ordnerpfad: public/css/

1. Öffne ThemeWare® im Theme-Manager und wechsle in den Tab "Layout" => Bereich "Typografie":

   1. Trage deine Schriftart im Abschnitt "Text" und/oder "Überschriften" ein. (z.B. "'Titillium Web', sans-serif")

   2. Trage deine Strickstärken im Abschnitt "Stichstärke" (light, normal, bold) ein. (z.B. 400, 400, 600)

• Prüfe ob nun keine Schriften mehr über die Google Fonts API geladen werden.