Fonts mit dem ThemeWare® Customizing Plugin lokal einbinden

In dieser Anleitung erfährst du, wie du Fonts (DSGVO-konform) selbst hosten und mit dem "ThemeWare® Customizing Plugin" einbinden kannst.

Wie du eigene Fonts oder Google Fonts selber hostest bzw. lokal auf deinem Webserver hinterlegst und dann mit unserem kostenfreien "ThemeWare® Customizing Plugin" in deinen Shopware 6 Shop (Self-hosted) einbinden kannst, erfährst du in diesem Artikel.

Hinweis: Das erstellen eines ThemeWare® Duplikates ist für Template-Anpassungen nicht notwendig.

Wichtig: In der Shopware 6 Cloud sind aktuell keine individuellen Anpassungen möglich!

Einleitung

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

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

• Alternativ kannst du die folgende Methode mit dem "ThemeWare® Customizing Plugin" nutzen.

Alle Informationen zum "ThemeWare® Customizing Plugin", der Installation und den Download-Link findest du im folgenden Artikel:

ThemeWare® Customizing Plugin

Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!

Fonts manuell einbinden

1. Erweiterung vorbereiten

1. Lade die Zip-Datei unserer Erweiterung über den Shopware 6 Erweiterungs-Verwaltung hoch

2. Installiere und aktiviere die Erweiterung danach

2. Benötigte Google Fonts herunterladen

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 google-webfonts-helper.

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. Gebe als Ordner-Präfix unter "3. Copy CSS" den Pfad /bundles/tcinncustomizing/fonts/ an
4. Downloade das ZIP-Archiv über den Button

Tipp: Funktioniert die Einbindung mit dem unter 3. angegebenen Pfad nicht, ergänze bitte die folgende Variable #{$sw-asset-public-url} vor dem Pfad.

Beispiel:

#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/

3. Schriftarten auf den Server hochladen und einbinden

1. Entpacke das ZIP-Archiv und lade die Fonts per FTP in den Plugin-Ordner "fonts" hoch Ordnerpfad: custom/plugins/TcinnCustomizing/src/Resources/public/fonts/

2. Öffne die Datei "base.scss" Ordnerpfad: custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/

3. Hinterlege in der "base.scss" durch kopieren und einfügen die CSS-Anweisungen der Fonts aus Abschnitt "3. Copy CSS". Weitere Schriftarten können einfach unterhalb der zuvor eingebunden CSS-Codes ergänzt
4. Speichere die Änderung der Datei "base.scss" und lade diese ggf. erneut hoch.

4. ThemeWare® konfigurieren

• Ö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)

  3. Deaktiviere die Option "Google Fonts importieren" damit die Fonts nicht von Google-Servern geladen werden.

• Speichere die Einstellungen damit das aktuelle Theme kompiliert wird und Änderungen in die Storefront übertragen werden.

5. Schriften in die Storefront laden

• Damit die Schriften in die Storefront geladen werden, deaktiviere das "ThemeWare® Customizing Plugin" bitte einmal und aktiviere es danach wieder.

• Nun sollte die gewünschte Schriftart in der Storefront verfügbar sein.

6. Abschluss

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

Tipp: Wie du prüfst ob dein Shop Schriften über die Google Fonts API importiert erfährst du in diesem Artikel: Website auf Google Fonts prüfen

Stand: Shopware 6.5.0

---

Beispiel

Für die "Roboto Condensed" könnte der embedd wie folgt lauten:

// Roboto Condensed

@font-face {
    font-family: 'Roboto Condensed';
    src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/RobotoCondensed-Light.ttf');
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/RobotoCondensed-Regular.ttf');
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/RobotoCondensed-Bold.ttf');
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Permanent Marker';
    src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/PermanentMarker-Regular.ttf');
    font-optical-sizing: auto;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

Stand: Shopware 6.6.6