1 Einleitung
2 Schriftartauswahl
3 Schriftkonfiguration
- 3.1 Basis-Schrift
- 3.2 Überschriften (H1 - H6)
4 CSS kompilieren
5 Individualisierung für Entwickler
6 Google-Webfonts lokal ablegen
- 6.1 Automatische Einbindung deaktivieren
- 6.2 Manuelle Einbindung von lokalem Server einrichten

Einleitung

In diesem Bereich kannst du die Schriftarten, die in deinem Shop verwendet werden, einstellen. Diese Einstellungen wirken sich global im ganzen Shop aus.

Es ist wichtig, zwischen der Schriftartauswahl und der eigentlichen Konfiguration zu unterscheiden.

Schriftartauswahl

Über die Schriftartauswahl wird gesteuert, welche Schriftarten grundsätzlich in deinem Shop geladen werden und somit zur Verfügung stehen. Das heißt im Umkehrschluss, wenn du eine Schriftart nutzen willst, solltest du sie hier auswählen, da sie sonst nicht greift.

Genauso kannst du natürlich nicht verwendete Schriftarten hier entfernen.

Tipp: Wusstest du schon, dass bei allen Schriftart-Selectboxen im Plugin die von dir konfigurierte Schriftartauswahl ganz oben und in blau dargestellt angezeigt wird?

Schriftkonfiguration

Basis-Schrift

Hier kannst du die global genutzte Schriftart außerhalb von Überschriften (H1 - H6) festlegen und bei Bedarf auch Schriftgrößen und Standardstile, wie fett, kursiv und unterstrichen definieren.

Überschriften (H1 - H6)

Hier kannst du für jeden der vom HTML-Standard spezifizierten Überschrift-Tags h1 bis h6 festlegen, welche Schriftart, -größe und -stile verwendet werden sollen.

CSS kompilieren

Wichtig: Änderungen in diesem Bereich benötigen eine Rekompilierung des SCSS. Daher muss das Plugin entsprechende Schreibrechte auf Dateien im Template besitzen. Dies bedeutet außerdem, dass das Speichern hier etwas länger dauert als an anderen Stellen im easyTemplate360.

Ihr könnt das ganze auch wieder auf den Template-Standard zurücksetzen.

Individualisierung für Entwickler

Die verfügbaren Schriftarten im Backend lassen sich über das Template steuern. Dazu wird eine ./config/fonts.json benötigt. Wie diese Datei aussehen kann, kannst du dem easyTemplate360 Parent-Template entnehmen.

Wichtig: Die Konfiguration muss mindestens einmal kompiliert werden, damit über die fonts.json bereitgestellte Einstellungen richtig im CSS ankommen.

Google-Webfonts lokal ablegen

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

Automatische Einbindung deaktivieren

Im Schriftarten-Bereich den Schalter für "Webfonts-Einbindung (Remote)" auf deaktiviert stellen.
Bereichseinstellungen speichern.

→ 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 ET360v2-Backend in den Bereich Global und füge bei "Eigener <head>-Inhalt" das CSS in einem Style-Tag ein. (<style> ... kopiertes CSS ... </style>)
Hinweis: Für eine optimale Einbindung solltest du in jedem @font-face Block die Anweisung font-display: swap; manuell einfügen, falls der Webfont-Helper diese nicht selbst erzeugt hat.
Beispiel:
<style> /* archivo-black-regular - latin-ext_latin */ @font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/archivo-black-v17-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/archivo-black-v17-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/archivo-black-v17-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/archivo-black-v17-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/archivo-black-v17-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/archivo-black-v17-latin-ext_latin-regular.svg#ArchivoBlack') format('svg'); /* Legacy iOS */ } /* montserrat-regular - latin-ext_latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-v25-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/montserrat-v25-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v25-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v25-latin-ext_latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-600 - latin-ext_latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/montserrat-v25-latin-ext_latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/montserrat-v25-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v25-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v25-latin-ext_latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-700 - latin-ext_latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-v25-latin-ext_latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/montserrat-v25-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v25-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v25-latin-ext_latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-italic - latin-ext_latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-v25-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/montserrat-v25-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v25-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v25-latin-ext_latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-600italic - latin-ext_latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/montserrat-v25-latin-ext_latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/montserrat-v25-latin-ext_latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v25-latin-ext_latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-600italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v25-latin-ext_latin-600italic.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-700italic - latin-ext_latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-v25-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/montserrat-v25-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v25-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v25-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v25-latin-ext_latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */ } </style>
Bis einschließlich Template v2.0.21 musst du noch zusätzlich folgenden Style-Tag im “Eigener <head>-Inhalt” einfügen, damit die Schriftarten im Frontend auch greifen: ('Montserrat' und ‘Archivo Black’ sind die Standard-Schrift-Familien vom ET360v2, ersetze diese ggf. durch die Schriftarten, die du im Schriftarten-Bereich konfiguriert hast bzw. die du über den Google Webfonts Helper heruntergeladen hast).
<style> /* Setzen der Standard-Font-Family fuer body, paragraphs und headings */ body { font-family: 'Montserrat', sans-serif; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'Archivo Black', sans-serif; } </style>
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.)

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:

https://solution360.atlassian.net/wiki/spaces/ET360V2/pages/3883368479