#2040 Google Web Fonts oder eigene Fonts DSGVO-konform lokal einbinden
Nachfolgend erläutern wir Ihnen, wie Sie Google Web Fonts bzw. eigene Fonts/Schriften DSGVO-konform mit ThemeWare® selber hosten bzw. lokal installieren und einbinden können.
Vorwort
ThemeWare® hat eine Schriftauswahl für die Primär-Schriftart (Texte) und die Sekundär-Schriftart (Headlines). Hier gibt es mehrere Optionen. Zum einen kann die Shopware "Standard"-Schrift ausgewählt werden. Zum anderen gibt es eine kleine Auswahl an Fonts.
Für eine flexiblere Schriftauswahl haben wir später die Option "Individueller Google Font" ergänzt, welche quasi die alte Auswahl ersetzt.
Standard-Schriften
Die Shopware 5 Standard-Schrift (Open Sans) wird von Shopware automatisch auf Ihrem Webserver installiert. Zudem werden ab dem ThemeWare® "Google Fonts Update" (ThemeWare® 2.3.7 für Shopware 5.6.x bzw. ThemeWare® 2.4.2 für Shopware 5.7.x) die vordefinierten Schriften lokal installiert.
Alle anderen Fonts/Schriften müssen entweder über die Google Fonts API importiert oder über die folgende Anleitung manuell installiert werden, da es leider nicht möglich ist über 9.000 Google Fonts in ThemeWare® zu integrieren.
Google Fonts API
Für den Import von Schriften/Fonts über die Google Fonts API gibt es lediglich eine Konfiguration:
- "Fonts lokal einbinden" (Tab "Farben & Typografie" => Tab "Typografie" => Bereich "Basiskonfiguration")
Aktivieren Sie diese Konfiguration wenn Sie die Google Fonts API nicht nutzen möchten bzw. deaktivieren Sie diese Konfiguration, wenn Sie die Google Fonts API nutzen möchten.
Schriften selber hosten bzw. lokal installieren
Der Prozess der lokalen Installation von Fonts/Schriften in der folgenden Anleitung hat sich in den letzten Jahren bewährt, auch das ThemeWare® "Google Fonts Update" ändert daran nichts.
Durch das Update ist es nun aber nicht mehr nötig, dies für Theme-spezifische Schriften zu machen. Die folgende Anleitung richtet sich daher vor allem an Kunden die individuelle Schriften statt der Standard-Schriften nutzen möchten.
Sie können die Anleitung aber auch nutzen um zu prüfen ob Sie Ihr Theme richtig konfiguriert haben.
Wichtige Voraussetzungen
Die Voraussetzung um Fonts/Schriften selber zu hosten bzw. lokal zu installieren und einzubinden ist, dass Sie ThemeWare® mindestens in Version 1.4.18 einsetzen und eine Ableitung von ThemeWare® vorhanden ist.
Des Weiteren müssen in der Theme-Konfiguration die folgenden Optionen wie angegeben einstellt sein:
- "Fonts lokal einbinden" (Tab "Farben & Typografie" => Tab "Typografie" => Bereich "Basiskonfiguration")
- Ja bzw. aktiviert
- "Primär-Schriftart" bzw. "Sekundär-Schriftart" (Tab "Farben & Typografie" => Tab "Typografie" => Bereich "Basiskonfiguration")
- "Standard" oder "Individueller Google Font" bzw. "Individuelle Schriftart"
Anleitungen
- Anleitung "Standard-Fonts" nutzen (einfach)
- Anleitung "Individuelle Fonts" installieren (individuell)
Anleitung "Standard-Fonts" nutzen
Die einfachste Methode Fonts lokal ohne Google Fonts API zu nutzen ist die Verwendung von Standard-Schriften.
Sie können einfach die Option "Standard" in einem oder beiden Feldern "Primär-Schriftart" bzw. "Sekundär-Schriftart" auswählen, dann brauchen Sie keine Fonts manuell installieren. (Aktivieren Sie dennoch unbedingt die Option "Fonts lokal einbinden"!)
Ab ThemeWare® 2.3.7 (für Shopware 5.6.x) bzw. ThemeWare® 2.4.2 (für Shopware 5.7.x) können Sie auch die für jedes Theme vorgesehenen Schriften (= Theme-Schriften) nutzen. Folgende Schriften/Fonts stehen Ihnen dabei zur Verfügung:
| Themes |
Primär-Schriftart |
Sekundär-Schriftart |
|---|---|---|
| alle | Standard: Open Sans | |
| Modern | Standard | Roboto (300,400,500,700) |
| Bath | Standard | Roboto Slab (300,400,500,600,700) |
| Bike | Source Sans Pro (300,400,600,700) | Exo 2 (300,400,500,600,700) |
| Bio | Roboto (300,400,500,700) | Englebert (400) |
| Clean | Montserrat (300,400,500,600,700) | Dancing Script (400,500,600,700) |
| Electric | Titillium Web (300,400,600,700) | |
| Exquisite | Standard | Oswald (300,400,500,600,700) |
| Fire | Standard | Lato (300,400,700) |
| Fit | Standard | Source Sans Pro (300,400,600,700) |
| Flower | Standard | Playfair Display (400,500,600,700) |
| Global | Standard | Roboto (300,400,500,700) |
| HiFi | Roboto (300,400,500,700) | Sedgwick Ave (400) |
| Kids | Source Sans Pro (300,400,600,700) | |
| Ladieswear | Lato (300,400,700) | Pacifico (400) |
| Lights | Lato (300,400,700) | Titillium Web (300,400,600,700) |
| Living | Source Sans Pro (300,400,600,700) | PT Sans (400,700) |
| Outdoor | Standard | Ubuntu (300,400,500,700) |
| Pets | Noto Sans (300,400,500,600,700) | |
| Plants | Standard | Source Sans Pro (300,400,600,700) |
| Strong | Roboto (300,400,500,700) | Oswald (300,400,500,600,700) |
Die finale Konfiguration im ThemeWare® Modern kann z.B. wie folgt aussehen:
Standard-Schrift
Standard- und Theme-Schrift
oder
Theme-Schrift
Anleitung "Individuelle Fonts" installieren
In der Schriftkonfiguration (Tab "Farben & Typografie" => Tab "Typografie" => Bereich "Basiskonfiguration") muss zunächst geprüft werden, welche "Primär-Schriftart" und "Sekundär-Schriftart" verwendet wird. Zusätzlich sind die "weights" (nachfolgend font-weights genannt), also die Strichstärken relevant.
In unserem folgenden Beispiel sind das:
- "Primär-Schriftart" (Tab "Farben & Typografie" => Tab "Typografie" => Bereich "Basiskonfiguration")
- "Open Sans" mit einer font-weight von "300,400,700"
- "Sekundär-Schriftart" (Tab "Farben & Typografie" => Tab "Typografie" => Bereich "Basiskonfiguration")
- "Roboto" mit einer font-weight von "300,400,700"
Um die Schriftarten herunterzuladen, empfehlen wir den kostenfreien Dienst von Herokuapp.
Schriftarten mit Herokuapp herunterladen
1. Suchen Sie oben links nach der zuvor ermittelten Schriftart und wählen Sie diese aus.
2. Geben Sie unter "Select styles" die primären font-weights an. (regular = 400)
3. Download des ZIP-Archives über den Button starten. Der Ordner-Präfix "../fonts/" muss nicht angepasst werden.
Schiftarten auf den Server hochladen und einbinden
1. Entpacken Sie das ZIP-Archiv und laden Sie die Fonts per FTP in den Fonts-Ordner der Theme-Ableitung hoch. Dieser Ordner liegt hier innerhalb Ihres Shopware Ordners:
- themes/Frontend/Name-Ihrer-Ableitung/frontend/_public/src/fonts
2. Erstellen Sie im Less-Ordner Ihrer Theme-Ableitung eine Datei mit dem Namen all.less, falls diese noch nicht vorhanden ist. Dieser Ordner liegt hier:
- themes/Frontend/Name-Ihrer-Ableitung/frontend/_public/src/less
3. Hinterlegen Sie hier durch kopieren und einfügen die CSS-Anweisungen der Fonts in der all.less Datei. Mehrere Schriftarten werden einfach unterhalb der zuvor eingebunden CSS-Codes ergänzt.
4. Wiederholen Sie die Schritte 1, 2 und 3 für jede Schriftart.
5. Wählen Sie im Feld "Primär-Schriftart" und/oder "Sekundär-Schriftart" die folgende Option aus:
- "Individueller Google Font" bzw. "Individuelle Schriftart"
6. Tragen Sie den Namen der gewünschten Schrift bzw. die Namen der beiden Schriften (siehe "font-family" im CSS-Code oben) in die folgenden Felder ein:
- "Individueller Font Primär" bzw. "Individuelle Primär-Schriftart"
- "Individueller Font Sekundär" bzw. "Individuelle Sekundär-Schriftart"
7. Aktivieren Sie nun bitte die Konfiguration "Fonts lokal einbinden".
8. Kompilieren Sie das Theme, damit die Änderungen wirksam werden!
Die finale Konfiguration sieht in unserem Beispiel wie folgt aus:
Da die "Open Sans" die Standard-Schrift von Shopware 5 ist, kann die Konfiguration genau genommen auch wie folgt aussehen:
Bitte teile uns deine Meinung mit!
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Einführung Anleitungen Handbuch Profiwissen Häufige Fragen Häufige Fehler Shopware allgemein
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.