In dieser Anleitung erfährst du, wie du Fonts (DSGVO-konform) selbst hosten und manuell einbinden kannst.
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.
Wichtig: In der Shopware 6 Cloud sind aktuell keine individuellen Anpassungen möglich!
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.
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 .
Suche oben links nach der gewünschten Schrift und wähle diese aus (z.B. "Titillium Web").
Gebe unter "2. Select styles" die benötigten Strichstärken an. (z.B. regular/400 und bold/600)
Als Ordner-Präfix unter "3. Copy CSS" kannst du es bei "../fonts/" belassen.
Entpacke das ZIP-Archiv und lade die Fonts per FTP in den Ordner "fonts" hoch
Ordnerpfad: public/fonts/
Wechsel in den Ordner "css" und erstelle die Datei "fonts.css"
Ordnerpfad: public/css/
Öffne ThemeWare® im Theme-Manager und wechsle in den Tab "Layout" => Bereich "Typografie":
Trage deine Schriftart im Abschnitt "Text" und/oder "Überschriften" ein. (z.B. "'Titillium Web', sans-serif")
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.
Downloade das ZIP-Archiv über den Button.
Hinterlege in der "fonts.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
Speichere die Änderung der Datei "fonts.css" und lade diese ggf. erneut hoch
Deaktiviere die Option "Google Fonts importieren" damit die Fonts nicht von Google-Servern geladen werden.
Wechsle nun in den Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "CSS-Datei":
Trage im Feld "Externe CSS-Datei" den Pfad zu deiner "fonts.css" ein. (z.B. "deinshop.de/css/fonts.css")
Prüfe, ob der "Experten-Modus" (Tab "Weiteres" => Bereich "Experten-Einstellungen") aktiviert ist, damit die CSS-Datei geladen wird.
Speichere die Einstellungen damit das aktuelle Theme kompiliert wird und Änderungen in der Storefront wirksam werden.
Nun sollte die gewünschte Schriftart in der Storefront verfügbar sein.
Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
Fonts manuell einbinden
1. Benötigte Google Fonts herunterladen
2. Schriftarten auf den Server hochladen und einbinden
3. ThemeWare® konfigurieren
Tipp: Prüfe in den Plugin-Einstellungen ("Erweiterungen" => "Meine Erweiterungen" => "Themes" => "ThemeWare® ...") ob der "Debug-Modus" deaktiviert ist, damit die CSS-Datei geladen wird.
4. Abschluss
Tipp: Wie du prüfst ob dein Shop Schriften über die Google Fonts API importiert erfährst du in diesem Artikel:
In dieser Anleitung erfährst du, wie du Google Fonts importieren kannst.
ThemeWare® bietet dir die Möglichkeit Google Fonts automatisiert zu importieren.
Haftungsausschluss: Die Informationen in diesem Artikel sind allgemeiner Natur und können keine konkrete rechtliche Beratung ersetzen. Lasse Dich vor der Nutzung von Font APIs wie z.B. Google Fonts bezüglich Datenschutz-Grundverordnung (DSGVO) unbedingt rechtlich beraten!
Klicke neben einem Style des Fonts auf den Button "+ Select this style" (1)
Es öffnet sich ein Offcanvas-Element "Selected family"
Im Bereich "Use on the web" findest du den Abschnitt "CSS rules to specify families"
Dort steht eine CSS-Anweisung für die gewählte Schriftart (2) (z.B. font-family: 'Open Sans', sans-serif;)
Wähle die Schriftart und den Fallback-Font aus und kopiere beides in das Konfigurationsfeld für die Schriftart von ThemeWare® (z.B. 'Open Sans', sans-serif)
Du kannst für den "Text" und die "Überschrift" die selbe Schriftart nutzen. Wenn du verschiedene Schriften nutzen möchtest, wiederhole die Schritte für die andere Schriftart.
Du kannst in den Konfigurationsfeldern "Strichstärke für Google Fonts (Text)" bzw. "Strichstärke für Google Fonts (Überschriften)" definieren welche Strichstärken importiert werden sollen. Hier musst du je nach Font prüfen, welche Stichstärken möglich sind.
Wichtig: Achte darauf, dass die gewünschten Strichstärken in allen gewählten Fonts zur Verfügung stehen. Möchtest du beispielsweise für "light" die Strichstärke 300 nutzen, dann müssen alle Schriftarten die du importierst die Strichstärke 300 unterstützen.
Damit die Fonts nun auch importiert werden, bietet ThemeWare® dir die Konfiguration "Google Fonts importieren" im Bereich "Google Fonts". Wähle hier die Option "Ja" aus.
Nun werden die gewünschten Fonts über die Google Fonts API importiert und stehen damit allen Besuchern zur Verfügung.
Tipp: Passe dahingehend auch die allgemeine Konfiguration für Strichstärken an.
Google Font(s) importieren
Wichtig: Wir empfehlen dir Google Fonts lokal einzubinden und nicht über die Google Fonts API zu importieren. Lasse Dich vor der Nutzung von Font APIs wie z.B. Google Fonts bezüglich Datenschutz-Grundverordnung (DSGVO) unbedingt rechtlich beraten!
Screenshots
Hinweis: Weitere Informationen zu "Google Fonts in ThemeWare®" finden Sie im ThemeWare® Handbuch: .
In diesem Bereich findest du viele nützliche Anleitungen rund um das Thema Fonts bzw. Schriften.
Bevor du mit der Schrift-Konfiguration startest empfehlen wir dir einen Blick in unser Video-Tutorial. Im Video "" erklären wir dir wichtige Grundlagen.
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.
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:
Lade die Zip-Datei unserer Erweiterung über den Shopware 6 Erweiterungs-Verwaltung hoch
Installiere und aktiviere die Erweiterung danach
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 .
Suche oben links nach der gewünschten Schrift und wähle diese aus (z.B. "Titillium Web")
Gebe unter "2. Select styles" die benötigten Strichstärken an. (z.B. regular/400 und bold/600)
Gebe als Ordner-Präfix unter "3. Copy CSS" den Pfad /bundles/tcinncustomizing/fonts/ an
Entpacke das ZIP-Archiv und lade die Fonts per FTP in den Plugin-Ordner "fonts" hoch
Ordnerpfad: custom/plugins/TcinnCustomizing/src/Resources/public/fonts/
Öffne die Datei "base.scss"
Ordnerpfad: custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/
Öffne ThemeWare® im Theme-Manager und wechsle in den Tab "Layout" => Bereich "Typografie":
Trage deine Schriftart im Abschnitt "Text" und/oder "Überschriften" ein. (z.B. "'Titillium Web', sans-serif")
Trage deine Strickstärken im Abschnitt "Stichstärke" (light, normal, bold) ein. (z.B. 400, 400, 600)
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.
Prüfe ob nun keine Schriften mehr über die Google Fonts API geladen werden.
Stand: Shopware 6.5.0
Für die "Roboto Condensed" könnte der embedd wie folgt lauten:
Stand: Shopware 6.6.6
Downloade das ZIP-Archiv über den Button
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
Speichere die Änderung der Datei "base.scss" und lade diese ggf. erneut hoch.
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.
