HS/FS GIRA Experte 4.12 / HTML5-Client / Schriftarten bei freier Visu

[Tachy]

Hallo zusammen,

ich bin vom GIRA Experten 4.11 auf 4.12 umgestiegen und wollte einmal das neue HTML5 bei meiner freien Visu testen. Unter dem alten Client-HTML funktioniert die in der Visu definierte angepasste Windows-Schriftart (Helvetica LT) ohne Probleme, aber über den Einstieg /hs und dem neuen Login kennt er die Schriftart nicht mehr. Die css-Stylesheets definieren meine eigene Schriftart auch nicht.

Auf meinen Windows-Touchpanels verwende ich noch den alten hsclient.exe, der bei der 4.12er nicht mehr mitgeliefert wird. Ich nehme mal an, die werfen den bald raus. Deswegen wollte ich das alsbald auch auf Browser-Vollbild-HTML5 umstellen. Aber wenn meine Schriftart nicht mitgenommen wird, ist das etwas schlecht.

Viele Grüße
tachy

[Tachy]

Hat niemand einen Tipp? Ich bin immer noch unschlüssig, wie das mit dem Einbinden eigener Schriftarten funktioniert. Wo und wie muss ich die in die "use.project.css" einbinden?

[Tachy]

Ein Wunder, dass es niemand wusste und sogar der GIRA-Support die Segel strich

Ich habe es mittlerweile dank KI selbst rausgefunden (Fun Fact: Gemini selbst referenzierte u.a. sogar meine Frage hier und meinte sinngemäß: "die Community ist sich noch unschlüssig" )

Also:

Man muss innerhalb des VISU-Editors im HS den Menüpunkt "Extras" -> "CSS-Einstellungen öffnen" wählen und dann die CSS (das ist die im Projektroot liegende "use.project.css") wie folgt editieren:

oben einfügen:

/* project specific CSS settings */
/* Schriftart via Base64 definieren */
@font-face {
font-family: 'Helvetica LT UltraCompressed';
src: url('data:font/woff2;charset=utf-8;base64,<embedded_font_in_BASE64>') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

.font-helvetica-uc {
font-family: 'Helvetica LT UltraCompressed', sans-serif !important;
}
​
/* classes for page and all elements */

.vpage {}

.vpage_popup {}

​.....

wer will, kann auch die Standardschriftart so referenzieren:

.vetext {
font-family: 'Helvetica LT UltraCompressed', sans-serif !important;
}

Wichtig ist, seinen ttf-Font zuerst in BASE64-WOFF2 zu konvertieren und den BASE64-Code bei "<embedded_font_in_BASE64>" einzufügen.

Transfonter.org (Empfohlen für Web/CSS)

1. Rufe transfonter.org auf.
2. Klicke auf Add fonts und wähle deine .ttf-Datei aus.
3. Wähle bei Formats das Format WOFF2 (und/oder WOFF) aus.
4. Schalte den Schalter Base64 encode auf ON.
5. Klicke auf Convert und lade die ZIP-Datei herunter (darin findest du die style.css mit dem fertigen @font-face-Code).

In der VISU kann dann bei der definierten Schriftart beim Textelement im Reiter "CSS" bei "CSS-Klassen" dann "font-helvetica-uc" in meinem Beispiel eingetragen werden.