Eigen kreierte Schriftart in Webseite einbinden problematisch, weil der Browser des Besuchers erst die Schriftart herunterladen muss - längere Ladezeit, leer?
ggf. leere Zeichen ☐☐☐ bzw. Zeichensalat, weil die font Daten fehlen ?
2 Antworten
Du kannst in deiner CSS-Datei in dem @font-face-Abschnitt, mit dem du die Schriftart einbindest, mit der CSS-Eigenschaft font-display festlegen, was passieren soll, wenn die Schriftart nicht schnell genug heruntergeladen wird.
Es gibt dabei vier mögliche Werte, die du nach deinem Geschmack setzen kannst:
block – Wenn die Schriftart noch nicht heruntergeladen wurde, der Browser aber die Seite bereits aufbauen möchte, wird statt des Textes zunächst ein leerer Platzhalter angezeigt. Der Browser schätzt dabei ab, wie viel Platz der Text in etwa einnehmen würde. Ist die Schriftart nach kurzer Wartezeit immer noch nicht verfügbar, wird der Text zunächst in einer alternativen Schriftart angezeigt, die der Besucher bei sich installiert hat und die laut Browser passen könnte. Sobald die richtige Schriftart dann heruntergeladen wurde, wird der Text in der richtigen Schriftart angezeigt.
fallback – Wie block, aber der Browser wartet nur sehr kurz, bevor der Text in einer alternativen Schriftart angezeigt wird. Außerdem bricht der Browser nach einer Weile das Herunterladen der Schrifart ab. In dem Fall wird der Text dauerhaft in der alternativen Schriftart angezeigt.
optional – Wie fallback, aber der Download der Schriftart wird sofort abgebrochen, sobald die alternative Schriftart ausgewählt wurde.
swap – Der Text wird immer sofort erst einmal in einer alternativen Schriftart dargestellt. Sobald die eigene Schriftart heruntergeladen wurde, wird der Text in der richtigen Schriftart dargestellt.
Wenn deine Schriftart für den Fließtext genutzt wird und deine Website recht textlastig ist, würde ich zu swap tendieren. Dann sieht der Besucher sofort, dass da was lädt, anstatt nur eine hauptsächlich leere Seite zu betrachten. Der Nachteil ist, dass die Seite sich noch einmal sichtbar verändert, sobald die Schriftart gerendert werden kann.
Wenn du eine Schriftart hast, die sehr einzigartig ist (besondere Schreibschrift, Symbole, etc.) und diese nur an wenigen Stellen zum Einsatz kommt, empfiehlt sich block. Der Browser wird ja eher keinen sinnvollen Ersatz finden und so wird einfach maximal gewartet, bis auf Alternativen zurückgegriffen wird. Dass zunächst ein paar Lücken auf der Website bleiben, ist in dem Fall nicht so schlimm.
Wenn dir deine Schriftart nicht so wichtig ist und eher nur ein nettes Gimmick ist, kann man optional oder fallback einsetzen. So erspart man Leuten mit schlechter Internetleitung den Download.
Wenn du die Schriftart zum Download bereitstellst und mittels @font-face korrekt in die CSS-Datei einbindest, lädt der Browser sie automatisch herunter. Natürlich kann der Nutzer immer hingehen und dies manuell unterbinden, indem er Browser-Einstellungen verändert oder einen Blocker verwendet.
Eine Font ist winzig klein. Da brauchst du dir keine Gedanken drüber zu machen. Wenn sich deine Website so verhält wie du es beschreibst hast du vielleicht eher ein Problem mit der Reihenfolge in der die Daten heruntergeladen werden. Aber die Downloadzeit ist auf jeden Fall kein Argument gegen eine Font. Mit dem Argument dürfest du ja auch keine CSS Dateien einbinden weil die Elemente nicht gestylet werden bis die Datei heruntergeladen ist.
ja das mit der Ladezeit ist nicht relevant, weil sehr kleine Größe, daher auch kein preload nötig oder empfehlenswert,
aber mir ging es darum ob die Schriftart automatisch runterlädt oder ob das erst manuell gemacht werden muss und manuell installiert werden ... auf dem Client-Gerät
Das geht automatisch, probier das mal so in deiner CSS Datei ganz oben:
@font-face {
font-family: 00PEDANTIX;
src: url('https://.../00PEDANTIX.TTF');
}
Und dann verwendest du das ganz normal:
<span style="font-family: 00PEDANTIX"></span>
Wird von allen Browsern unterstützt: https://caniuse.com/?search=%40font-face
Hab ich aber selbst nie ausprobiert.
wird der Download erzwungen oder ist der individuell ?
lädt der automatisch beim neu-aufrufen der Seite ?