Google Fonts bei Github laden und lokal einbinden

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. Dieser Artikel zeigt Ihnen am Beispiel der von Google über Github zur Verfügung gestellten Schriften, wie Sie hierzu vorgehen.

Über https://github.com/google/fonts/ stellt Google verschiedene Schriftarten zur Verfügung. Das komplette Archiv mit allen Schriften kann über https://github.com/google/fonts/archive/master.zip heruntergeladen werden.

Schriften unter Mobile First BASE (MFB) lokal einbinden

Die enthaltenen Schriftordner laden Sie in das webfonts-Verzeichnis hoch, welches in aktuellen Projekten unter /IhrGlobalesProjekt/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).

In der fonts.scss binden Sie 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

Die enthaltenen Schriftordner laden Sie in das webfonts-Verzeichnis hoch, welches in aktuellen Projekten unter /IhrGlobalesProjekt/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).

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.

  • Beachten Sie bei Verwendung externer Schriften die Lizenzbestimmungen der jeweiligen Schriftart!
  • Bei Problemen mit dem Einbinden einer Schriftart können wir gerne über eine Projektdienstleistung weiterhelfen, was nach Aufwand berechnet wird.

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG