Zulässige/empfohlene Fonts

[Rolf B]

Hallo Ulli,

naja, was für Trauerbekundungen geeignet ist, das ist nicht für jeden Menschen gleich.

Und es stellt sich nicht die Frage nach dem Browser, sondern nach dem Betriebssystem. Jedes Betriebssystem hat sein Basispaket an Fonts. Mir persönlich fehlt da allerdings gerade der Überblick, welche das sind.

Die Alternative ist ein Webfont, den Du in die Seite einbindest. Eine Quelle dafür wäre Google Fonts. Wichtig ist dabei, dass Du den Font selbst hostest und nicht vom Google-Server einbindest, andernfalls kann Google tracken, wer deine Seite abruft.

Oder Du erstellst die virtuelle Trauerkarte als Grafik, dann brauchst Du den Font nur auf deinem eigenen Gerät.

Bei einem Webfont bietet Dir Google beispielsweise dieses HTML Snippet an, um "Arsenal SC" einzubinden:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arsenal+SC:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Die beiden preconnect-Zeilen sollen vermutlich sicherstellen, dass die CSS-Datei und die WOFF-Dateien für den Font halbwegs gleichzeitig kommen. Wenn Du den Font selbst hostest, brauchst Du sie nicht.

Die dritte Zeile bindet ein kleines Stylesheet ein, das den Arsenal SC Font definiert. Hier musst Du ansetzen. Dieses Stylesheet lädst Du auf deinen PC (im Zweifelsfall so, dass Du die URL in den Browser eingibst und das angezeigte Stylesheet speicherst). Es enthält eine Menge @font-face Definitionen, die für bestimmte Zeichenbereiche und Schriftdarstellungen festlegen, in welcher Fontdatei das Zeichen zu finden ist. Die Abschnitte sind kommentiert, du weißt also, welche für Dich unnötig sind. Die Abschnitte für Kyrillisch und Vietnamesisch sind es bestimmt, die kannst Du rauswerfen. Bei Arsenal SC sollten dann 8 @font-face Definitionen übrig bleiben, das kannst Du weiter reduzieren, wenn Du kursiv (font-style:italic) oder fett (font-weight:700) nicht brauchst. Von den benötigten Definitionen lädst Du die woff2-Dateien auf deinen PC. Bei mir gelingt das auch mit dem Browser: Einfach die URL zum Font in die Adresszeile kopieren und der Browser macht einen Download. Die woff2-Datei findest Du dann im Download-Ordner und kopierst Sie von dort auf deinen Server. Danach passt Du im Font-Stylesheet die url()-Angaben unter src: so an, dass sie von deinem Server geholt werden. Die @font-face Definitionen, die nötig sind, überträgst Du in dein Stylesheet.

Das ist etwas Handarbeit, es ist aber aus Datenschutzgründen sehr sinnvoll.

Ob Arsenal SC für Dich geeignet ist, musst Du selbst schauen, Google Fonts bietet viele Fonts an und es gibt auch andere Font-Quellen. Je nach Font und Herkunft wird das Stylesheet, das Du vom Anbieter bekommst, unterschiedlich aussehen. Und nicht alle erlauben es Dir, die WOFF-Dateien zu kopieren. Wenn Du einen Font für Dich gefunden hast und nicht zurechtkommst, kannst Du Dich gerne nochmal melden.

Rolf