Page Comparison

...

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.

...

Versions Compared

Old Version 7

New Version Current

Key

Automatische Einbindung deaktivieren