Einleitung

In diesem Bereich legst Du globale Einstellungen für Schriftarten fest. Also vor allem, welche Schriftarten standardmäßig im Shop zum Einsatz kommen sollen.

Du kannst hier auch alle Überschriften (HTML-Elemente vom Typ h1 - h6, oder mit der CSS-Klasse .h1 - .h6) global stylen.

Du kannst hier aber auch weitere Schriftarten hinzufügen, die dir dann in der individuellen Schriftkonfiguration zur Verfügung stehen.

Technisch funktioniert der Bereich ähnlich wie der Farben-Bereich, da er auch die Kompilierung der LESS-Styledatei erfordert, damit die Anpassungen greifen.

Hinweis: Die Schriftarten, die Dir zur Verfügung stehen, hängen von der von Dir gebuchten Lizenz ab. Außerdem haben wir eine Vorauswahl von Schriftarten getroffen, die technisch recht gut mit dem EasyTemplate360 zusammenarbeiten können und Umlaute unterstützen. Dennoch kann es natürlich sein, dass gerade bei sehr großen Schriftarten das Layout etwas betroffen sein kann. Du solltest also ausgiebig testen, ob noch alles ok aussieht, wenn Du global die Schriftarten änderst.

Standardschriften

Hier wählst Du die Standards für den Shop aus.

Beim EasyTemplate360 Standard-Theme sind das z.B.:

Hauptschrift

Diese Schrift wird fast überall verwendet.

Schmuckschrift

Diese Schrift wird vereinzelt eingesetzt (z.B. beim Autor in den Kundenbewertungen, aber auch beim Herstellernamen oder der kleinen Überschrift im Hauptslider).

H1 - H6

Hier kannst Du global einstellen, wie die Überschriften H1-H6 dargestellt werden sollen.

Widget-Überschriften

Tipp: Die Überschriften der Widgets sind alle vom Typ H2!

Preview-Styledatei / Styledatei aktualisieren

Erst, wenn Du die Styledatei aktualisiert hast, werden die Einstellungen in Preview- / Live-Ansicht sichtbar.

Denke daran, auch immer trotzdem noch den Speichern-Button zu betätigen, damit Deine Änderungen dauerhaft im Backend bestehen bleiben.

Individuelle Schriften

Dieser Bereich ist wichtig, wenn Du andere als die Standard-Schriftarten in einzelnen Widgets verwenden willst.

Um eine Schrift zur Auswahl in Widgets hinzuzufügen, gehst Du folgendermaßen vor:

Vergib einen internen Namen für die Schrift im Feld "Label".
Drücke auf den +-Button.
Dann suche die konkrete Schriftart für die Schrift aus.

Preview-Styledatei / Styledatei aktualisieren

Beachte auch hier, dass Du die neuen Schriftarten erst im Frontend siehst, wenn die Preview-Styledatei und/oder die Styledatei aktualisiert wurde.

Google-Webfonts lokal ablegen

Wenn Du nicht willst, dass die Webfonts "remote" von den Google-Servern eingebunden werden, kannst du wie folgt vorgehen.

Achtung - diese Schritte erfordern Plugin-Version 1.4.0 oder höher!

Automatische Einbindung deaktivieren

Im Schriftarten-Bereich den Schalter für "Automatische Webfonts-Einbindung (Remote)" ausschalten.
Bereichseinstellungen speichern.
"Style-Datei aktualisieren" ausführen. (Hintergrund: die Remote-URLs werden im ET360v1 per CSS-Styles importiert. Daher ist eine Re-Kompilierung der Style-Dateien notwendig. Sonst greift die Änderung der Einstellung "Automatische Webfonts-Einbindung (Remote)" nicht.)

→ Dein Shop nutzt nun keine Remote-Webfonts mehr und im Frontend sollten nur Standard-Schriftarten des Browser zu sehen sein. Damit du trotzdem Google-Fonts im Frontend anzeigen kannst, musst du die nachfolgenden Schritte ausführen.

Manuelle Einbindung von lokalem Server einrichten

Hierzu nutzt du am besten das Tool Google Webfonts Helper, welches du unter folgender URL erreichst: https://gwfh.mranftl.com/fonts
Dieses Tool erzeugt automatisch die benötigten Schriftarten-Dateien und CSS-Anweisungen.

Für jede Schriftart, die du einbinden willst, musst du folgende Schritte ausführen:

Rufe den Google Webfonts Helper auf → https://gwfh.mranftl.com/fonts
Suche die Schriftart im Google Webfonts Helper und klicke sie an.
Wähle, falls vorhanden, die Charsets "latin" und "latin-ext" aus.
Wähle alle verfügbaren Styles aus.
Ändere den "Folder-Prefix" auf /fonts/ (Wichtig: führendes / und ohne führende Punkte; wenn du die Font-Dateien woanders ablegen willst, kannst du den Pfad hier entsprechend anpassen)
Lade die ZIP-Datei über den Button unten herunter.
Entpacke die ZIP-Datei.
Lade die dort enthaltenen Dateien ohne sie umzubenennen in deinen Shop hoch in den Ordner fonts/ (der Ordner existiert vermutlich noch nicht - lege ihn einfach an, alternativ kannst du die Dateien auch irgendwo hin hochladen und musst dann aber den Pfad entsprechend in Schritt 5 anpassen)
Kopiere das vom Google Webfonts Helper angezeigte CSS.
Gehe im ET360v1-Backend in den Bereich Global und füge bei "Eigener <head>-Content" das CSS in einem Style-Tag ein.
Beispiel: <style> ... kopiertes CSS ... </style>
Hinweis: Für eine optimale Einbindung solltest du in jedem @font-face Block die Anweisung font-display: swap; manuell hinzufügen, falls der Webfont-Helper diese nicht selbst erzeugt hat.
Speichere die Einstellungen ab.

→ Dein Shop sollte jetzt die Schriftarten lokal vom Server laden und sie sollten im Frontend sichtbar sein.

Schriftarten-Einstellungen

Falls die manuell eingebundenen Schriftarten nicht im Frontend sichtbar sein sollten, stelle vor allem sicher, dass die manuell eingebundenen Schriftarten den Einstellungen im Plugin-Backend im Bereich "Schriftarten" entsprechen. (Das CSS muss schließlich auch auf die richtigen Schriftarten-Namen verweisen.)

Stelle außerdem bitte sicher, dass du den Eintrag im <head> für jede Sprache im Shop gesetzt hast!

Lizenzhinweise

Wenn du die Schriftarten lokal einbindest, kann es sein, dass du auch die entsprechende Lizenz der Schriftart erwerben musst oder einen Hinweistext zur Lizenz einbinden musst. Genaue Informationen dazu findest du im Google Webfonts Helper.

Die lokale Google Fonts Einbindung ist auch über ein Child-Template möglich:

Beispiel - Google Fonts lokal einbinden mit Child-Template