#2146 Google Fonts oder eigene Fonts DSGVO-konform lokal einbinden

Wie du eigene Fonts oder einen Google Font lokal in deinen Shopware 6 Shop (Self-hosted) einbinden kannst, erfährst du in diesem Artikel.

Lösungen

1. Prüfe ob es im Shopware Community Store bereits ein passendes Plugin gibt.
2. Alternativ kannst du eine unserer beiden nachfolgenden manuellen Methoden nutzen.

Manuelle Methoden

In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Wir haben dafür zwei Lösungsvorschläge für dich entwickelt:

1) Google Fonts manuell einbinden

• Vorteile
  • kein Plugin nötig
• Nachteile
  • CSS wird nicht automatisch komprimiert
  • in der Shopware 6 Cloud nicht möglich

2) Google Fonts mit unserem kostenfreien Plugin manuell einbinden (für erfahrende Anwender)

• Vorteile
  • professionelle Vorgehensweise
  • CSS wird automatisch komprimiert
• Nachteile
  • eher für erfahrende Anwender
  • nur über externes Plugin möglich (gern stellen wir dir dafür unser kostenfreies Plugin "ThemeWare^® Customizing" zur Verfügung)
  • in der Shopware 6 Cloud nicht möglich

Anleitung: Google Fonts manuell einbinden

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

1) 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 von Herokuapp.

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 kannst du es bei "../fonts/" (ohne Anführungszeichen) belassen.
   
4. Downloade das ZIP-Archiv über den Button.
   

2) Schriftarten auf den Server hochladen und einbinden

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 "main.css".
   Ordnerpfad: "public/css/"
3. Hinterlege in der "main.css" 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 "main.css" und lade diese ggf. erneut hoch.

3) 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.
• Wechsle nun in den Tab "Weiteres" => Bereich "Beta":
  1. Trage im Feld "Externe CSS-Datei" den Pfad zu deiner main.css ein. (z.B. "deinshop.de/css/main.css")
  2. Speichere die Einstellungen damit das aktuelle Theme kompiliert wird und Änderungen in der Storefront wirksam werden.

Anleitung: Google Fonts mit unserem kostenfreien Plugin manuell einbinden (für erfahrende Anwender)

Die derzeit professionellste Methode ist es Fonts über ein separates Plugin zu integrieren. Hierfür haben wir ein kleines kostenfreies Plugin "ThemeWare^® Customizing" für die Integration von individuellen Anpassungen und eigenen Dateien entwickelt.

Alle Informationen zum Plugin, der Installation und den Download-Link findest du über folgenden Link:

Download ThemeWare^® Customizing

1) Plugin vorbereiten

1. Lade die Zip-Datei unseres Plugins über den Shopware 6 Erweiterungs-Verwaltung hoch.
2. Installiere und aktiviere das Plugin 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 von Herokuapp.

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 "/bundles/tcinncustomizing/fonts/" (ohne Anführungszeichen) an.
   
4. Downloade das ZIP-Archiv über den Button.
   

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" (ehemals "main.scss"; ab Shopware 6.4 muss die Datei "base.scss" heißen).
   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.
  4. 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.

Die finale Konfiguration sieht in unserem Beispiel wie folgt aus:

Weiterführende Links:

• ThemeWare^® Video-Tutorial: "Typografie – Schriften konfigurieren"
• Anleitung: "Individuelle Anpassungen mittels CSS"
• Anleitung: "Individuelle Anpassungen mittels SCSS" (für erfahrende Anwender)
• Anleitung: "Individuelle Template-Anpassungen (Twig, HTML)" (für erfahrende Anwender)
• Anleitung: "Individuelle Anpassungen mit dem ThemeWare^® Customizing Plugin" (für erfahrende Anwender)