Google Fonts bei Github laden und lokal einbinden

Navigation

Veröffentlichungsdatum: 07. Juni 2018
Änderungsdatum: 06. April 2022

weblication cms fonts schriftarten schriften einbinden google github

Unterschiedliche Schriftarten können Sie auch lokal im Projekt einbinden, also auf den Aufruf zu einem externen Server verzichten.

Unter anderem kann es aus Datenschutzgründen erforderlich sein, spezielle Schriftarten nicht von einem externen Server zu laden, sondern lokal im Projekt einzubinden.

Schriften unter BASE (Mobile First) lokal einbinden
Einbinden über Maske
Manuelles Einbinden ohne Maske
Schriften unter BASE Classic lokal einbinden
Allgemeines

Schriften unter BASE (Mobile First) lokal einbinden

Dieser Artikel zeigt Ihnen am Beispiel der von Google über Github zur Verfügung gestellten Schriften, wie Sie hierzu vorgehen.

Über Google Fonts oder Google Fonts über Github stellt Google verschiedene Schriftarten zur Verfügung.

Einbinden über Maske

Ab CMS-Version 17 lassen sich über die Layout-Verwaltung bei Bearbeitung der fonts.scss Schriftarten über Masken einspielen, auswählen und konfigurieren.

Manuelles Einbinden ohne Maske

Die enthaltenen Schriftordner laden Sie in das webfonts-Verzeichnis hoch, welches in aktuellen Projekten unter /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/webfonts zu finden ist. Im Beispiel der 'Open Sans' Schriftart laden Sie also das opensans-Verzeichnis mit den beinhalteten Dateien direkt in das webfonts-Verzeichnis hoch (z.B. über FTP, oder manuelles Anlegen des Verzeichnisses und Hochladen der Dateien).

Unter Weblication^® CMS-Versionen vor 17.x binden Sie In der fonts.scss die Schriftart wie folgt ein:

Beispiel: Auszug aus der fonts.scss zum Einbinden einer lokalen Schriftart (z.B. Open Sans)

/* Schriftarten */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open-Sans'), 
    local('Open-Sans'), 
    url(#{$wGlobalProjectPath}/wGlobal/layout/webfonts/opensans/OpenSans-Regular.ttf) format('truetype');
}


/* Zuweisen der Open Sans Schriftart als Standard-Schriftart: */
$fontFamilyDefault:Open Sans, Helvetica, Arial, Sans-serif; /* Standardschriftart */

Schriften unter BASE Classic lokal einbinden

In der design.css binden Sie die Schriftart wie folgt ein:

Beispiel: Auszug aus der design.css zum Einbinden einer lokalen Schriftart (z.B. Open Sans)

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open-Sans'), 
    local('Open-Sans'), 
    url('$wGlobalProjectPath/wGlobal/layout/webfonts/opensans/OpenSans-Regular.ttf') format('truetype');
}


/* Zuweisen der Open Sans Schriftart als Standard-Schriftart: */
$fontFamilyDefault:Open Sans, Arial, Sans-serif, Helvetica; /* Standardschriftart */

Allgemeines

Die o.g. Beispiele zeigen eine Umsetzung exemplarisch an. Bei anderen Schriftarten geben Sie die zum Schriftsatz passenden Werte wie vom Hersteller beschrieben an.

Gut zu wissen:
Die aktivierte Einstellung "Laden von sonstigen externen Ressourcen bestätigen lassen" in der Projektkonfiguration bezieht sich auf das Einbinden von link- bzw. script-Tags über die webfonts.wHTML.php. Beim Einbinden lokaler Schriftarten wie in diesem Artikel beschrieben greift dies somit nicht, weshalb die Schriften immer eingebunden werden.

Beachten Sie bei Verwendung externer Schriften die Lizenzbestimmungen der jeweiligen Schriftart!
Beim automatischen Generieren von font-face Definitionen werden ggf. hinter die url-Zeilen Kommentare gesetzt, welche unter CMS 12.x bei der Mobile First dazu führt, daß die Schriften nicht in die optimierte CSS-Datei generiert wird. Entfernen Sie dann die Kommentare in der fonts.css. Ab Version 13.x ist dies nicht mehr erforderlich.
Bei Problemen mit dem Einbinden einer Schriftart können wir gerne über eine Projektdienstleistung weiterhelfen, was nach Aufwand berechnet wird.