Google Web Fonts DSGVO-konform lokal einbinden (SW5)
Einführung
Dieser Artikel erläutert, wie Google Web Fonts oder eigene Schriftarten DSGVO-konform mit ThemeWare® selbst gehostet bzw. lokal installiert und eingebunden werden können.
Unsere Empfehlung: Schriften bezüglich DSGVO selber zu hosten bzw. lokal zu installieren und nicht über die Google Fonts API zu importieren.
Vorwort
ThemeWare® bietet Schriftauswahloptionen für Primär- (Texte) und Sekundär-Schriftarten (Headlines). Die Optionen umfassen die Shopware-Standard-Schrift oder eine kleine Fontauswahl. Eine "Individueller Font"-Option ermöglicht flexiblere Auswahl. Die alte Google-Fonts-Auswahl ist seit dem "Google Fonts Update" (November 2022) deaktiviert.
Standard-Schriften
Open Sans wird von Shopware automatisch installiert. Ab ThemeWare® 2.3.7 (Shopware 5.6.x) bzw. 2.4.2 (Shopware 5.7.x) sind vordefinierte Schriften lokal vorhanden. Andere Fonts erfordern manuelle Installation über die folgende Anleitung.
Google Fonts API
Die Konfiguration "Fonts lokal einbinden" (Tab Farben & Typografie → Typografie → Basiskonfiguration) steuert die API-Nutzung. Diese Einstellung verhindert zwar die API-Nutzung, installiert die Schriften aber nicht automatisch.
Wichtige Voraussetzungen
- ThemeWare® mindestens Version 1.4.18
- Eine ThemeWare®-Ableitung ist erforderlich
- Ableitung muss dem Frontend zugewiesen sein
- Konfigurationen müssen korrekt eingestellt sein
Erforderliche Einstellungen:
- "Fonts lokal einbinden": aktiviert
- "Primär-Schriftart" / "Sekundär-Schriftart": "Standard" oder "Individueller Font"
Anleitung 1: Standard-Fonts nutzen
Die einfachste Methode ist die Nutzung von Standard-Schriften ohne Google Fonts API. Wähle einfach "Standard" in den Fontfeldern aus.
Verfügbare Theme-Schriften (ab Version 2.3.7/2.4.2):
| Theme | Primär-Font | Sekundär-Font |
|---|---|---|
| Modern | Roboto (300,400,500,700) | Standard |
| Bike | Source Sans Pro | Exo 2 |
| Clean | Montserrat | Dancing Script |
| HiFi | Roboto | Sedgwick Ave |
Anleitung 2: Individuelle Fonts installieren
Schritt 1: Font-Anforderungen bestimmen
Prüfe in der Theme-Konfiguration (Tab Farben & Typografie → Typografie → Basiskonfiguration):
- Welche Primär- und Sekundär-Schriftart wird verwendet?
- Welche Font-Weights sind erforderlich?
Beispiel: Primär: Open Sans (300,400,700), Sekundär: Roboto (300,400,700)
Schritt 2: Schriftarten herunterladen
- Besuche
https://google-webfonts-helper.herokuapp.com/fonts - Suche die gewünschte Schriftart
- Wähle die benötigten Font-Weights unter "Select styles"
- Lade das ZIP-Archiv herunter
Schritt 3: Fonts auf den Server hochladen
- Entpacke das ZIP-Archiv
- Lade die Fonts per FTP in den Fonts-Ordner der Theme-Ableitung hoch:
themes/Frontend/[Name-deiner-Ableitung]/frontend/_public/src/fontsSchritt 4: CSS-Datei erstellen/bearbeiten
- Erstelle ggf. die Datei all.less im Less-Ordner:
themes/Frontend/[Name-deiner-Ableitung]/frontend/_public/src/less - Füge die CSS-Anweisungen der Fonts aus dem Download ein
- Wiederhole die Schritte für jede zusätzliche Schriftart
Schritt 5: Konfiguration in ThemeWare®
- Wähle in "Primär-Schriftart" und/oder "Sekundär-Schriftart": "Individuelle Schriftart"
- Trage die Font-Namen in die entsprechenden Felder ein:
- "Individuelle Primär-Schriftart"
- "Individuelle Sekundär-Schriftart"
- Aktiviere "Fonts lokal einbinden"
Wichtig: Verwende keine Anführungszeichen oder Sonderzeichen. Leerzeichen sind je nach Font erforderlich.
Schritt 6: Theme kompilieren
Kompiliere das Theme, damit die Änderungen wirksam werden.
Google Fonts Update (November 2022)
Das Update löst das bisherige System ab, das "fest definierte Schriften" und "individuelle Google Fonts" über Dropdown-Menüs verwaltete.
Drei zentrale Änderungen
- Lokale Schrifteinbindung als Standard: Das Konfigurationsfeld "Fonts lokal einbinden" ist nun standardmäßig aktiviert.
- Vereinfachte Schrift-Optionen: Die Dropdowns zeigen nur noch "Standard" oder "Individuelle Schriftart" an; alte Optionen erhalten den Vermerk "(Option wird entfernt)".
- Theme-spezifische Schriften integriert: Jedes ThemeWare®-Theme hat nun spezifische Schriften vorinstalliert.
Checkliste nach dem Update
- "Fonts lokal einbinden" prüfen
- "Primär-Schriftart" prüfen
- "Sekundär-Schriftart" prüfen
- Veraltete Optionen beachten
- Theme neu kompilieren
Zusätzliche Hinweise
- Die Konfiguration "Fonts lokal einbinden" gilt für beide Schriftarten gleichermaßen
- Open Sans kann als Standard-Option ausgewählt werden (muss nicht manuell installiert werden)