#2040 Google Web Fonts oder eigene Fonts DSGVO-konform lokal einbinden

Nachfolgend erläutern wir Ihnen, wie Sie Google Web Fonts oder eigene Fonts DSGVO-konform in ThemeWare einbinden.


Voraussetzung

Die Voraussetzung hierfür 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:

  • Tab "Farben & Typografie" => Tab "Typografie" => Bereich "Basiskonfiguration" => Fonts lokal einbinden: Aktiv
  • Tab "Farben & Typografie" => Tab "Typografie" => Bereich "Basiskonfiguration" => Primär-Schriftart bzw. Sekundär-Schriftart: Individueller Font


Falls Sie eigene Fonts verwenden möchten oder die gewünschten Fonts bereits im richtigen Format vorliegen, gehen Sie bitte direkt zum Abschnitt "Schiftarten auf den Server hochladen und im Theme einbinden".


Benötigte Google Fonts herunterladen und einbinden

In der Basiskonfiguration (Tab "Farben & Typografie" => Tab "Typografie" => Bereich "Basiskonfiguration") muss zunächst geprüft werden, welche Primär- und Sekundär-Schriftarten verwendet werden. Zusätzlich sind die Schriftart Weights (nachfolgend font-weights) relevant.


In unserem folgenden Beispiel sind das:

  • Primär-Schriftart: Open Sans mit einer font-weight von 300,400,700
  • Sekundär-Schriftart: 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 Primär-Schriftart und wählen Sie diese aus

2. Geben Sie unter "Select styles" die primären font-weights an. (regular = 400, italic = 400i)



3. Download des ZIP-Archives über den Button starten. Der Ordner-Präfix "../fonts/" muss nicht angepasst werden.


Schiftarten auf den Server hochladen und im Theme 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 alle nötigen Schritte für jede Schriftart. 

5. Kompilieren Sie das Theme, damit die Änderungen wirksam werden!


Die finale Konfiguration sieht in unserem Beispiel wie folgt aus:


Weitere Artikel in der Kategorie ""

b2b65a7dfb7c6e1ac8d39427ada914ea
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 undunsere 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