Google Fonts lokal einbinden mit Child-Template

Owned by Christian Pohl
Last updated: Dec 22, 2022 by Chris Podubrin
5 min read

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 https://solution360.atlassian.net/wiki/spaces/ET360V2/pages/3415998506 .

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

Google Fonts remote deaktivieren

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

Google Fonts lokal einbinden

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

Einbindung der Schriftarten

 

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