Wie binde ich in Textbausteinen eine externe Schriftart ein?

Question

Liebes Forum,

ich habe zwei Fragen:

1) Ich möchte in verschiedenen Textbausteinen - und nur dort - spezielle Schriftarten/Fonts verwenden, die der Editor (Formatierter Text) nicht anbietet. Die entsprechenden Truetype Font Dateien (z.B. Mistral.ttf) hätte ich zur Hand und könnte sie hochladen, um sie auf diese Weise einzubinden.

Meine Frage ist nun wie ich den HTML/CSS Code anzupassen habe, damit dies (möglichst in den gängigen Browsern unter Windows) funktioniert.

2) Damit ich nicht mehrere Textbausteine erstellen muss, wäre die elegante Lösung, die Schriftart anhand einer Variable direkt im Fragebogen festzulegen. Sofern dies geht, bin ich an der Lösung ebenfalls sehr interessiert :-)

Ich bedanke mich vorab für die tolle Hilfe, die hier geboten wird und freue mich auch meine MA mithilfe dieses tollen Tools durchführen zu dürfen!

Beste Grüße

Answer 1

Die entsprechenden Truetype Font Dateien (z.B. Mistral.ttf) hätte ich zur Hand und könnte sie hochladen, um sie auf diese Weise einzubinden.

Haben Sie auch die Nutzungsrechte an der Schrift, damit SIe diese einfach im Internet verbreiten/verwenden dürfen?

Meine Frage ist nun wie ich den HTML/CSS Code anzupassen habe, damit dies (möglichst in den gängigen Browsern unter Windows) funktioniert.

Die folgende Anleitung erklärt das:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face

Die Anweisungen müssen in den <style>-Bereich der Seite. Am einfachsten erreichen Sie das, indem Sie das @font-face ...' beim "Fragebogen-Layout" -> "HTML-Vorlage des Layouts" in den `-Bereich einfügen.

Anschließend können Sie die Schriftart via CSS (style=...) überall im Fragebogen verwenden, wo Sie sie benötigen. Verwenden sie dafür direkt HTML-Code, nicht den WYSIWYG-Texteditor ("formatierter Text").

Comments

Vielen Dank, für Ihre Antwort!

Zwecks der Lizenz kläre ich mit meine Betreuer ab, ob diese an der Professur schon vorliegt, ich bin nicht der erste der diese und andere Schriftarten nutzt. Danke für den Hinweis!

Den von Ihnen vorgeschlagene Programmiercode habe ich soweit umgesetzt, allerdings gab es Schwierigkeiten damit, woher die Font Datei geladen wird. Zunächst können .ttf-Dateien nicht bei Sosci hochgeladen werden. Von daher hilft es nur, die Datei auf einen bzw. von einem anderen Server zu laden. Filesharing-Dienste oder sonstige frei zugängliche Dateihoster, ich habe zahlreiche Möglichkeiten probiert, funktionieren nicht und die Datei nicht geladen werden.

Die Stichwörter hierbei sind: Access-Control-Allow-Origin und cross-origin resource sharing (CORS).

Dieses Dilemma lässt sich nur durch Zugriff auf den jeweiligen Webserver und das Wissen um die Konfiguration zu beheben.

Hier wird genau dieses Problem noch einmal beschrieben (inkl. Lösungsansätze):
https://zinoui.com/blog/cross-domain-fonts

Ich für meinen Fall konnte es glücklicherweise über einen eigenen Server lösen, für andere Nutzer wäre es generell vielleicht überlegenswert - und das soll nur ein Vorschlag sein - den Upload auf .ttf, .woff und ggf. noch andere Dateitypen zu erweitern?

Viele Grüße
Axel Teichmann

---

> Zunächst können .ttf-Dateien nicht bei Sosci hochgeladen werden.

Na, das bekommen wir noch hin :) Jetzt sind auch TTF erlaubt.