Knowledgebase

Fonts in Gantry 5 einbinden, die nicht vom google-Server geladen werden

Bewertung:  / 1
SchwachSuper 

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. Im Custom-Verzeichnis legt man einen fonts-Ordner an, in dem alle eigenen Fonts ordnerweise abegelegt werden. Wir wollen z.B. einen Font Archive einbinden, also erstellen wir einen Ordner /templates/g5_xxx/custom/fonts/archive-fontfabric/.
  2. In diesen Ordner kopieren wir nun alle browser-/systemabhängigen Font-Dateien der unterschiedlichen Formate:
    • otf (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)
  3. 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 i.d.o.g. Gruppe Font Families und tragen bei Body Font oder bei Title Font den Font-Family-Namen ein.
    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.

 

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.



 

  • Keine Kommentare gefunden

Einen Kommentar verfassen

Als Gast kommentieren

0
Deine Kommentare erfordern die Moderation durch den Administrator
Nutzungsbedingungen.
Suche - Kategorien
Suche - Inhalt
plg_search_attachments
VM - Search, Virtuemart Product

Ihr Warenkorb

 x 
Ihr Warenkorb ist noch leer.