2. ThemeWare®
  3. Shopware 5
  4. Wissensdatenbank
  5. #2040 Google Web Fonts oder eigene Fonts DSGVO-konform lokal einbinden
Wissensdatenbank

Support anfordern

Nimm Kontakt mit uns auf

Ticket erstellen
Zurück zur vorherigen Seite

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


Tipp: Wir empfehlen Schriften bezüglich DSGVO selber zu hosten bzw. lokal zu installieren und nicht über die Google Fonts API zu importieren.


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.


Hinweis: Die alte Auswahl an Google Fonts hat ab dem ThemeWare® "Google Fonts Update" (November 2022) keine Wirkung mehr. Die Optionen werden später entfernt. Zudem heißt die Option "Individueller Google Font" nun "Individueller Font".


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.


Hinweis: Die Konfiguration "Fonts lokal einbinden" verhindert zwar, dass die Google Fonts API genutzt wird, die gewünschten Schriften werden aber nicht automatisch auf Ihrem Webserver installiert! Folgen Sie einfach dieser Anleitung um die gewünschten Schriften selber zu hosten bzw. lokal zu installieren.


Hinweis: Die Konfiguration "Fonts lokal einbinden" gilt für die Primär- und die Sekundär-Schriftart gleichermaßen. Aktivieren Sie diese Konfiguration müssen beide Schriften lokal installiert werden.


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

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"!)


Hinweis: Es spielt keine Rolle welche Schrift Sie als Primär-Schriftart bzw. Sekundär-Schriftart nutzen sofern die Schrift in Ihrem Theme vorhanden ist.


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.


Tipp: Damit die nachfolgen beschriebene Anleitung funktioniert, muss die folgende Konfiguration natürlich in einer entsprechenden Ableitung durchgeführt werden. Die Ableitung muss zudem dem Frontend zugewiesen werden! (siehe Abschnitt "Voraussetzung", oben).


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"


Hinweis: In einem Feld kann auch "Standard" ausgewählt werden wenn Sie dort die Open Sans nutzen möchten.

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"


Hinweis: In den Feldern ist nur ein Name möglich! Verwenden Sie bitte keine Anführungszeichen oder sonstige Sonderzeichen. Leerzeichen sind je nach Font hingegen nötig bzw. erlaubt.

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!

Danke, das hat mir geholfen
Hat mir nicht geholfen

Video-Tutorial

Funktionen finden

Geführter Assistent Feldsuchmaschine

Fehler beheben

Geführter Assistent Häufige Fehler

ThemeWare® Utilities
00ae31932c21339281c666a8d2bfdfcc