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. |
Hier wählst Du die Standards für den Shop aus.
Beim EasyTemplate360 Standard-Theme sind das z.B.:
Diese Schrift wird fast überall verwendet.
Diese Schrift wird vereinzelt eingesetzt (z.B. beim Autor in den Kundenbewertungen, aber auch beim Herstellernamen oder der kleinen Überschrift im Hauptslider).
Hier kannst Du global einstellen, wie die Überschriften H1-H6 dargestellt werden sollen.
Tipp: Die Überschriften der Widgets sind alle vom Typ H2! |
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.
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:
Beachte auch hier, dass Du die neuen Schriftarten erst im Frontend siehst, wenn die Preview-Styledatei und/oder die Styledatei aktualisiert wurde.
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!
→ 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.
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:
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.
→ Dein Shop sollte jetzt die Schriftarten lokal vom Server laden und sie sollten im Frontend sichtbar sein.
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! |
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