Achtung, das hier beschriebene Vorgehen ist nur relevant für eine Integration mit Child-Templates. Um ohne Child-Template die Fonts lokal einzubinden, folge bitte den Anweisungen im Bereich Schriftarten . |
Bei Unsicherheiten empfehlen wir, Kontakt zu Deinem jeweiligen JTL-Servicepartner aufzunehmen. Dieser kann bei der notwendigen Umsetzung unterstützen. |
Notwendige Tools:
FTP Zugang
sinnvoller Text-Editor (bspw.: Notepad++)
Gehe ins easyTemplate360-Backend
Unter dem Punkt “Einstellungen” - “Schriftarten” - deaktivierst du die Einbindung
Nun werden keine Fonts mehr von den Google Webfont-Servern geladen, folglich ist im Frontend auch zunächst nur noch die Standard-Schriftart vom Browser zu sehen.
Gehe wie folgt vor, um die Google Webfonts lokal auf deinem Server einzubinden.
Hier beschreiben wir erstmal den Weg, falls noch kein Child-Template im Einsatz ist. Sollten Sie bereits ein Child-Template im Einsatz haben, so fahren Sie weiter ab “Einbindung der Schriftarten” |
Beispiel Zip für ein funktionierendes Child-Template:
Entpacke die ZIP-Datei so, dass sich der Pfad /templates/meinChild/template.xml ergibt.
Wähle Deine genutzten Schriftarten über gängige Google Font Helper, z.B. https://gwfh.mranftl.com/fonts herunter. (Optional - Das Beispiel-Child kommt bereits mit den Standard-Schriftarten aus dem ET360v2, daher nur notwendig, wenn du andere/weitere Schriftarten nutzt!)
Laden die Schriftarten herunter und speicher den “Copy CSS” Bereich in ein extra Dokument (Optional - Das Beispiel-Child kommt bereits mit den Standard-Schriftarten aus dem ET360v2, daher nur notwendig, wenn du andere/weitere Schriftarten nutzt!)
template.xml - “meinChild” in gewünschten Theme Namen umbenennen. Dieser Theme-Name ist im Quellcode, jedoch nicht im Frontend sichtbar: (optional, nur notwendig, wenn du einen anderen Theme-Namen haben willst)
Bootstrap.php - Pfad zum Template im Namespace anpassen (optional, nur notwendig, wenn du das Beispiel-Child in einem anderen Ordner als templates/meinChild abgelegt hast!)
(Optional - wichtig: der Name im namespace muss dem Ordner-Namen im templates/-Ordner entsprechen!)
Dateiendungen müssen gleich bleiben
ACHTUNG: Sollten Sie bereits ein Child-Template verwenden, beachten Sie die Pfade der bereits eingebundenen CSS-Dateien und tragen dort die gewünschten Änderungen ein.
Öffne die fonts.css Datei im Ordner css, hier sind als Beispiel die Default-Schriftarten vom ET360v2, Montserrat und Archivo Black, eingebunden (Optional, die fonts.css musst du nur anpassen, wenn du andere/weitere Schriftarten verwendest)
/* 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 */ } /* Setzen der Standard-Font-Family fuer body, paragraphs und headings */ body { font-family: 'Montserrat', sans-serif; } p { font-family: inherit; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'Archivo Black', sans-serif; } |
Hier kannst du die vom Google Webfont Helper kopierten CSS-Styles einfügen. (Optional)
Achte auf die Pfade der Schriftdateien - sie müssen relativ zur CSS-Datei korrekt sein.
Kopiere die Schriftdateien aus dem Download in den fonts Ordner (Optional)
Childtemplate aktivieren, Caches löschen
Zur Prüfung sowie fortführenden Informationen: https://www.e-recht24.de/google-fonts-scanner