Table of Contents

minLevel	1
maxLevel	7

Einleitung

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

...

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.

...

Hierzu nutzt du am besten das Tool Google Webfonts Helper, welches du unter folgender URL erreichst: https://google-webfonts-helper.herokuappgwfh.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:

Code Block

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

Code Block

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

...

Info

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:

Google Fonts lokal einbinden mit Child-Template

Versions Compared

Old Version 4

New Version Current

Key

Einleitung

Automatische Einbindung deaktivieren

Page Comparison

Versions Compared

Old Version 4

New Version Current

Key

Einleitung

Automatische Einbindung deaktivieren