Tipps & Tricks - Schriftarten einbinden

Dieser Beitrag zeigt, wie zusätzliche Web-Fonts in Intrexx eingebunden werden können.

Voraussetzung

Zusätzliche Schriftarten müssen in der entsprechenden Stärke (font-weight) vorliegen. Bitte beachten Sie dabei, dass nicht alle Schriftarten dieselben Spezifikationen haben und damit individuell geprüft werden sollten.

Beispiel

Font

Für unser Beispiel soll die Schriftart "Baloo 2" eingebunden werden. Diese ist unter https://fonts.google.com erhältlich. Der Download hier wird allerdings nicht verwendet, da er die Schriftart lediglich im Format .ttf liefert. Zum Einbinden in Intrexx sollten aber die Formate .woff und .woff2 eingesetzt werden. Wir verwenden statt dem direkten Download deshalb den Generator https://google-webfonts-helper.herokuapp.com/fonts.

Font-Files und CSS erzeugen

Suchen Sie auf der Generator-Seite oben links nach der Schriftart "Baloo 2".



Wählen Sie font-weight "regular" und "bold (700)" aus. Für das CSS klicken Sie auf "Modern Browsers", um damit ältere Schrift-Formate aus dem Paket auszuschließen. Geben Sie als Folder-Prefix "./" an. Laden Sie dann das fertige ZIP-File herunter.

Font-Files in Portal aufnehmen

Entpacken Sie das heruntergeladene ZIP-File in das Portalverzeichnis external/htmlroot/fonts/baloo2.

CSS erstellen

Erstellen Sie die CSS-Datei "baloo2.css" im selben Ordner. Kopieren Sie das erzeugte CSS aus https://google-webfonts-helper.herokuapp.com/fonts und fügen Sie es in der Datei ein. Diese font-face-Deklarationen liefern die Schriftartennamen, die später im Intrexx-Layout verwendet werden können. Hier unser Beispiel-CSS:

/* baloo-2-regular - latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  src: local('Baloo 2 Regular'), local('Baloo2-Regular'),
       url('./baloo-2-v1-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./baloo-2-v1-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* baloo-2-700 - latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  src: local('Baloo 2 Bold'), local('Baloo2-Bold'),
       url('./baloo-2-v1-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./baloo-2-v1-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Schriften laden

Öffnen Sie die Datei "custom_head.vm" im Portalverzeichnis internal/system/vm/custom und fügen Sie die baloo2.css als stylesheet hinzu:

## embed custom fonts
<link rel="stylesheet" href="/fonts/baloo2/baloo2.css"/>

In Intrexx kann die neue Schrift nun in beliebigen Applikationen oder im Modul Design in besten Layouts verwendet werden. Öffnen Sie den Eigenschaftendialog eines Elements und wechseln Sie auf den Reiter Ansicht. Klicken Sie dort auf "CSS Regel hinzufügen". Die font-family kann nun direkt im CSS mit

font-family: "Baloo 2";

als eigener Style eingetragen werden. Als font-weight steht 400/normal und 700/bold - wie im Generator zuvor ausgewählt - zur Verfügung.

Die Intrexx-Standardschriften finden Sie übrigens auch im Portalverzeichnis external/htmlroot/fonts.