Beispiel - Google Fonts lokal einbinden mit Child-Template

Owned by Chris Podubrin
Last updated: Oct 24, 2022 by Sebastian Meyer
2 min read

 

Diese Beschreibung ist nur für die Integration mit Child-Templates relevant. Du kannst auch ohne Child-Template das Laden von Webfonts unterbinden, indem du der Beschreibung im Bereich https://solution360.atlassian.net/wiki/spaces/ET360WIKI/pages/152010769 folgst!

Diese Anpassungen sind notwendig

 

Bei Unsicherheiten empfehlen wir, Kontakt zu Ihrem jeweiligen JTL-Servicepartner aufzunehmen. Dieser kann bei der notwendigen Umsetzung unterstützen.

 

Notwendige Tools:

  • FTP Zugang

  • sinnvoller Text-Editor (bspw.: Notepad++)

Easytemplate 360

  • Wählen Sie Ihre aktuell genutzten zwei Schriftarten über gängige Google Font Helper, z.B. https://google-webfonts-helper.herokuapp.com/

    • WICHTIG: wählen Sie die im easyTemplate Backend, Bereich “Schriftarten”, eingestellten bzw. ausgewählten Schriftarten aus!

  • Laden Sie diese herunter und speichern Sie sich den “Copy CSS” Bereich in ein extra Dokument

  • verbinden Sie sich per FTP

  • Wechseln Sie in den Order templates/easytemplate360/themes/default/less/include/

  • Bearbeiten Sie die Datei type-definitions.less

    – beide “@import" Anweisungen mit // auskommentieren oder löschen
    – beide Schriftfamilien benennen, den Namen erhalten Sie auf dem zuvor gespeichterten CSS

  • Wechseln Sie in den Ordern templates/easytemplate360/themes/default/less/

  • Bearbeiten Sie die Daten theme.less

  • Hier die Zeile @import (optional) "include/type-custom"; auskommentieren oder löschen

 

Anlage eines Child Template

Beispiel Childtemplate

Anpassungen

  • template.xml - “meintheme” in gewünschten Theme Namen umbenennen. Dieser ist im Quellcode, jedoch nicht im Frontend sichtbar

     

  • Dateiendungen müssen gleich bleiben

  • öffnen Sie die fonts.css Datei im Ordner “css”, hier sind als Beispiel die Schriftarten Open Sans und Abril Fatface eingebunden:

  • Hier kopieren Sie die oben zwischengespeicherten Anweisungen ein

  • Achten Sie auf die Pfade der Schriftdateien

  • Kopieren Sie die Schriftdateien aus dem Download in den “fonts” Ordner

  • Childtemplate aktivieren, Caches löschen, CSS im ET aktualisieren (Bereich “Schriftarten”)

 

 

Zur Prüfung sowie fortführenden Informationen: https://www.e-recht24.de/google-fonts-scanner