Versions Compared

Old Version 3

changes.mady.by.user Michael Rose (Unlicensed)

Saved on

compared with

New Version 4

changes.mady.by.user Sebastian Meyer

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

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

  2. 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://google-webfonts-helper.herokuapp.com/
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:

  1. Rufe den Google Webfonts Helper auf → https://google-webfonts-helper.herokuapp.com/

  2. Suche die Schriftart im Google Webfonts Helper und klicke sie an.

  3. Wähle, falls vorhanden, die Charsets "latin" und "latin-ext" aus.

  4. Wähle alle verfügbaren Styles aus.

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

  6. Lade die ZIP-Datei über den Button unten herunter.

  7. Entpacke die ZIP-Datei.

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

  9. Kopiere das vom Google Webfonts Helper angezeigte CSS.

  10. 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>)
    Beispiel:

    Code Block
    <style>
/* archivo-black-regular - latin-ext_latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  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;
  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;
  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;
  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;
  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;
  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;
  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>

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

  12. Speichere die Einstellungen ab.

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

Info

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

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.