Zielstellung:

Über den Template-Manager von Gantry 5 ist es sehr einfach Fonts in das Template einzubinden, ganz besonders dann, wenn man einfach nur einen Font vom Google-Font-Server einbinden möchte. Hierfür wird von Gantry 5 im Template-Manager ein Font-Selector-Tool angeboten Base-Outline > Register Styles > Gruppe Font Families. Das wäre ein Methode.

Eine weitere Methode, aber ein klein wenig komplizierter, wäre es, wenn man z.B. für Kundenprojekte eine CI-Schrift einbinden soll, die nicht aus dem Google-Fundus kommt. Zunächst sind hier natürlich die Urheber- und Lizenzrechte für die Schrift zu beachten! Nicht jede Schrift darf einfach über eine Webseite eingebunden werden. Das wäre eine unzulässig Verbreitung, denn jede so eingebundene Schrift ist dann für jedermann downloadbar. Es gibt aber neben den Google-Fonts weitere Seiten die auch kostenlose Schriften anbieten - z.B. fontfabric.com oder fontsquirrel.com. Hier allerdings werden diese nicht als Dienst bereitgestellt, sondern man muss diese als ZIP-Archiv herunterladen und selbst hosten und entsprechend als Font-Family einbinden. Diese Methode soll nun beschrieben werden.

 

Umsetzung im Detail

Auch dieser Fall wird vom Gantry 5 Framework gut unterstützt. Die Vorgehensweise ist wie folgt:

 

  1. Fonts herunterladen von z.B. https://fonts.1d5920f4b44b27a802bd77c4f0536f5a-gdprlock/
  2. Klären unter welchen Lizenzbedingungen die Fonts genutzt werden dürfen.
  3. ttf-Fonts zu anderen Fontformaten (Derivaten) konvertieren: https://www.fontsquirrel.com/tools/webfont-generator
  4. Ggf. woff-Fonts zu neueren woff2-Format umwandeln: https://everythingfonts.com/woff-to-woff2
  5. Noch mal überprüfen, ob die Fonts auch korrekte Dateien sind. Ich hatte schon z.B. von fontsquirrel Konvertierungsarchive erhalten, bei denen einige Schriftderivate nur 0 Byte groß waren. Wenn man das übersieht und diese erst auf dem Webserver liegen, sucht man lange nach dem Fehler, warum die Schriften, obwohl eigentlich korrekt eingebunden, nicht funktionieren. Manche Browser-Deverlopertools zeigen solche Fehler in der Console an.
  6. Unter Gantry5-Templates: (siehe dazu auch die Anleitung von Gantry5-Tutorial http://docs.gantry.org/gantry5/tutorials/fonts):
    • Alle Schriften im Ordner template/[gantrytemplate]/custom/fonts/ in einem Font-Family-Ordner und Font-Style-Unterordner ablegen z.B. ~/meinfont/meinfont-regular/. Allerdings kann man das auch ins Template-Core-Verzeichnis (templates/rt_topaz/fonts) ablegen, da diese ja nicht überschrieben werden. Aber sauberer ist es, dafür das Custom-Verzeichnis als Basis zu verwenden.
    • Die Datei templates/[gantrytemplate]/gantry/theme.yaml öffnen und die neue Fontfamilie in den fonts: Bereich mit allen Stilen eintagen, z.B.:
      meinfont:
      400: 'gantry-theme://fonts/meinfont/meinfont-regular/meinfont-regular-webfont'
      400italic: 'gantry-theme://fonts/meinfont/meinfont-italic/meinfont-italic-webfont'
      700: 'gantry-theme://fonts/meinfont/meinfont-bold/meinfont-bold-webfont'
      700italic: 'gantry-theme://fonts/meinfont/meinfont-bolditalic/meinfont-bolditalic-webfont'
      Achtung: Das ist eigentlich ein Core-Script und für dieses gibt es im Gantry5 noch kein Overriding. Deshalb wird die theme.yaml mit einem Gantry-Update ziemlich sicher wieder überschrieben werden. Darum ist es sinnvoll die Datei zu dublizieren und als zukünfitg wiederverwendbare Reserve abzulegen, z.B. als theme(mit-meinen-Custom-local-Fonts).yaml. Das erneute Überschreiben ist aber immer nur dann notw. wenn wir nach einem Update in die Konfiguration müssen, um einen Lokalen Font wieder neu zuzuordnen. Da würde dann unser neuer Custom-local-Font fehlen. Ansonsten ist diese Konfig. so in den Templatekonfigurationen abgespeichert und muss auch bei Updates eigentlich nicht wieder angefasst werden.
    • Nun kann man in der Theme "Basic Outline" diesen Font in den Font-Pickern als lokalen Font vorfinden und zuordnen. Damit ist er dann schon über die Fontvariablen (i.d.R. z.B. $font-family-default oder $font-family-title) verfügbar und kann die vorherigen Google-Ressourcen-Fonts ersetzen.
    • Alternativ kann der Font auch in den SCSS-Dateien eingebunden werden, was den Vorteil hat, updatesicher zu sein. Dafür gibt es verschiedene Scripte und Schreibweisen um das zu erreichen. Jedenfalls darf das aber erst nach dem Aufruf von @import ‚dependencies‘; in der custom.scss erfolgen. Entweder gleich in der custom.scss oder in der _variables.scss oder in der _typography.scss (jeweils in den custom-Overrides).

      Der Font-Import erfolgt dann am einfachsten über die Nutzung der SCSS-Mixin-Funktion import-font (s. dazu das Mixin-Script media/gantry5/engines/nucleus/scss/vendor/bourbon/css3/_font-face.scss), die widerrum die Mixin-Methode font-face (s. dazu das Mixin-Script media/gantry5/engines/nucleus/scss/nucleus/theme/mixins/_typography.scss) verwendet. Oder man verwendet gleich selbst die font-face-Methode. Die import-font-Methode holt sich selbst nötige Informationen aus Font-Dateien oder Dateinamen, dazu müssen aber bestimmte Konventionen eingehalten werden. import-font kennt deshalb auch nur einen Parameter, den Pfadnamen:
      @include import-font('meinfont', 'gantry-theme://fonts/meinfont-regular-webfont');
      @include import-font('meinfont', 'gantry-theme://fonts/meinfont-bold-webfont');
      Leider habe ich noch nicht herausbekommen, wie die Konventionen sind damit auch italic-Styles erkannt werden. Diese Varianten hier werden z.B. nicht importiert.
      @include import-font('meinfont', 'gantry-theme://fonts/meinfont-italic-webfont');
      @include import-font('meinfont', 'gantry-theme://fonts/meinfont-bolditalic-webfont');

      Per o.g. font-face-Methode habe ich mehr Möglichkeiten Parameter zu übergeben, dafür sind die Codezeile halt etwas länger:
      @include font-face('meinfont', '../fonts/meinfont/meinfont-regular/meinfont-regular-webfont', 400, 'normal');
      @include font-face('meinfontitalic', '../fonts/meinfont/meinfont-italic/meinfont-italic-webfont', 400, 'italic');
      @include font-face('meinfontbold', '../fonts/meinfont/meinfont-bold/meinfont-bold-webfont', 700, 'normal');
      @include font-face('meinfontbolditalic', '../fonts/meinfont/meinfont-bolditalic/meinfont-bolditalic-webfont', 700, 'italic');
      Hier wurde z.B. ein eigener Font-Family-Name für die Font-Styles verwendet. Das muss so nicht sein, aber man kann so z.B. einfach Font, Style und Weight mit einem mal zuweisen per CSS
      font-family: "meinfontbolditalic";.

      Eben aufgeführte Scriptzeilen verwenden immer eine feste Pfadangabe, und legen damit fest, in welchem Verzeichnis der Font exakt liegt. Alternativ kann man das auch Gantry überlassen in dem wir den Pfad so angeben: 'gantry-theme://fonts/meinfont/meinfont-regular/meinfont-regular-webfont'. Gantry sucht dann erst in ~/custom/fonts/ und dann in ~/fonts/ nach diesem Font.

      Abschließend sei der Vollständigkeit halber noch die 3. Möglichkeit aufgeführt werden mit der die Fonts importiert werden können, die vollständig selbst codierte CSS-Variante ohne Nutzung von Mixin-Methoden. Das sähe dann so aus:

      @font-face {
         font-family: 'meinfont';
         font-style: normal;
         font-weight: 400;
         src: url('../../fonts/meinfont/meinfont-regular/meinfont-regular-webfont.eot');
         src: local('Mein Font Regular'),
              local('Mein-Font-Regular'),
              url('../../fonts/meinfont/meinfont-regular/meinfont-regular-webfont.eot#iefix') format("embedded-opentype"),
              url('../../fonts/meinfont/meinfont-regular/meinfont-regular-webfont.woff2') format("woff2"),
              url('../../fonts/meinfont/meinfont-regular/meinfont-regular-webfont.woff') format("woff"),
              url('../../fonts/meinfont/meinfont-regular/meinfont-regular-webfont.ttf') format("truetype"),
              url('../../fonts/meinfont/meinfont-regular/meinfont-regular-webfont.svg#quando') format("svg");
      }
      @font-face {
         font-family: 'meinfont';
         font-style: italic;
         font-weight: 400;
         src: url('../../fonts/meinfont/meinfont-italic/meinfont-italic-webfont.eot');
         src: local('DDL Droid Serif Italic'),
              local('DDL-DroidSerif-Italic'),
              url('../../fonts/meinfont/meinfont-italic/meinfont-italic-webfont.eot#iefix') format("embedded-opentype"),
              url('../../fonts/meinfont/meinfont-italic/meinfont-italic-webfont.woff2') format("woff2"),
              url('../../fonts/meinfont/meinfont-italic/meinfont-italic-webfont.woff') format("woff"),
              url('../../fonts/meinfont/meinfont-italic/meinfont-italic-webfont.ttf') format("truetype"),
              url('../../fonts/meinfont/meinfont-italic/meinfont-italic-webfont.svg#quando') format("svg");
      }
      @font-face {
         font-family: 'meinfont';
         font-style: normal;
         font-weight: 700;
         src: url('../../fonts/meinfont/meinfont-bold/meinfont-bold-webfont.eot');
         src: local('DDL Droid Serif Bold'),
              local('DDL-DroidSerif-bold'),
              url('../../fonts/meinfont/meinfont-bold/meinfont-bold-webfont.eot#iefix') format("embedded-opentype"),
              url('../../fonts/meinfont/meinfont-bold/meinfont-bold-webfont.woff2') format("woff2"),
              url('../../fonts/meinfont/meinfont-bold/meinfont-bold-webfont.woff') format("woff"),
              url('../../fonts/meinfont/meinfont-bold/meinfont-bold-webfont.ttf') format("truetype"),
              url('../../fonts/meinfont/meinfont-bold/meinfont-bold-webfont.svg#quando') format("svg");
      }
      ...
  7. Im Custom-Verzeichnis legt man einen fonts-Ordner an, in dem alle eigenen Fonts ordnerweise abegelegt werden. Wir wollen z.B. einen Font MeinFont einbinden, also erstellen wir einen Ordner /templates/g5_xxx/custom/fonts/meinfont/. Wie oben schon beschrieben wäre auch das Core-Font-Verzeichnis nutzbar /templates/g5_xxx/.fonts/meinfont/. Wie die Unterverzeichnisse dann beispielsweise aufgebaut sein könnten, ist in o.g. Scriptzeilenbeispielen nachvollziehbar, ebenso die sinnvolle Benennung der Font-Dateien.
  8. In diese Ordner kopieren wir nun alle browser-/systemabhängigen Font-Dateien der unterschiedlichen Formate:
    • otf (speziell für IE, OpenType-Font wie ttf),
    • eot (speziell für IE)
    • ttf (true-type-font: für fast alle Systeme, aber nicht IE),
    • woff (web-open-font-format: ein komprimierter Standard),
    • svg (für iPhone und iPad),
    • woff2 (ein noch besser komprimierte woff)
  9. Normalerweis müsste man nun noch die gesamte Font-Family in die scss-Dateien einbinden, aber diesen Schritt nimmt uns Gantry 5 ab. Wir gehen in den Template-Manager in Base Outline i.d.o.g. Gruppe Font Families und tragen bei z.B. Body Font oder bei Title Font den Font-Family-Namen meinfont ein oder wählen diesen per Font-Picker-Dialog unter den lokalen Fonts aus (s.o. theme.yaml).
    Alternativ kann auch einfach per Editor z.B: die templates/g5_helium/custom/config/default/styles.yaml im Eintrag font: family-default: oder font: family-title: bearbeitet werden und hinter diesen Parameterbezeichnern der Font-Family-Name eingetragen werden. Manche Templates kennen weitere Font z.B. Promo-Font etc.

 

Verwendung in den Style-Scripten

Zum einen werden über die Template-Konfiguration (Register Styles, Gruppe Font-Families) schon Schriften eingebunden. Diese werden durch Gantry über Variablen in den scss-Scripten bereitgestellt. Dies sind in der Regel immer die Variablen

  $font-family-default
Body Font $font-family-body
Title Font $font-family-title
Promo Font $font-family-promo
SubPromo Font $font-family-subpromo

So erfolgt die Verwendung in den Style-Scripten: p.promo: get-font-family($font-family-promo);

 

 

Scripte im Umfeld der Einbindung von Fonts

Diese Liste ist nicht vollst. sondern nur eine Auswahl. Sie resultiert aus Erfahrungen die sich bei der Suche nach Problemlösungen ergaben.

 

templates/g5_helium/scss/configuration/_typography.scss Hier werden für das Template die Fonts vordefiniert in dem sämtliches default- und title-Font-Variablen mit Werten belegt werden um diese in den anderen scss-Scripten verwenden zu können.
administrator/components/com_gantry5/scss/admin/_fonts.scss Bindet die Font-Family roboto in den Adminbereich für das Gantry ein.
templates/g5_helium/scss/helium/styles/_fonts.scss Ist das Style-Script, welches die RocketTheme-Apps-Fonts einbindet, z.B: die Logos für Grav und Gantry, als font-family: rockettheme-apps - hier am Beispiel-Template Helium.
media/gantry5/engines/nucleus/scss/vendor/bourbon/css3/_font-face.scss Deklaration des mixin font-face().
media/gantry5/engines/nucleus/scss/vendor/bourbon/helpers/_font-source-declaration.scss Deklaration der Funktionen font-url-prefixer() und font-source-declaration(). Hier werden für alle üblichen Font-Dateiformate (s.o.) die korrekte Einbindung ins CSS erzeugt
media/gantry5/engines/nucleus/scss/nucleus/theme/mixins/_typography.scss Hier wird das mixin import-font() deklariert. import-font sollte z.B. in der custom.scss verwendet werden um eigene Font-Families einzubinden. Diese Script enthält nur diese eine Funktion. In templates/rt-meintemplate/scss/meintemplate/styles/_typography.scss wird die Funktion verwendet um die 5 Template-Fonts aus der Konfiguration ins CSS einzubinden.
administrator/components/com_gantry5/js/google-fonts.json Dieses Java-Script definiert ein JSON-Objekt mit allen verfügbaren Google-Fonts für den Font-Selector.