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.