#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.

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


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.


3) 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.


4) ThemeWare® konfigurieren

  • Öffne ThemeWare® im "Theme-Manager" und wechsle in den Bereich "Typografie" (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 Bereich "Beta" (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.


Download ThemeWare® Customizing


1) Plugin vorbereiten

  1. Lade die Zip-Datei unseres Plugins über den Shopware 6 "Plugin-Manager" 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 "main.scss".
    Ordnerpfad: "custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/"

  3. Hinterlege in der "main.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 "main.scss" und lade diese ggf. erneut hoch.


4) ThemeWare® konfigurieren

  • Öffne ThemeWare® im "Theme-Manager" und wechsle in den Bereich "Typografie" (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.


Hinweis: Bei jeder Änderung im "ThemeWare® Customizing" Plugin muss das aktuelle Theme kompiliert werden damit Änderungen in die Storefront übertragen werden.



Die finale Konfiguration sieht in unserem Beispiel wie folgt aus:

 


Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

c99e3f6f725babc8ab8811e73b2d5870
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen