Font-Loading-Strategie, im Tech-Kontext.
Die Font-Loading-Strategie legt fest, wie eigene Schriften geladen und überbrückt werden. Falsch gesetzt kostet sie sichtbaren Text und erzeugt Sprünge.
Eine Font-Loading-Strategie beantwortet drei Fragen: woher kommt die Schrift, was zeigt der Browser in der Wartezeit, und wie stark springt das Layout beim Wechsel. Selbst gehostete WOFF2-Dateien mit Vorabladen sind heute Standard, weil externe Schriftdienste eine zusätzliche Verbindung kosten und datenschutzrechtlich geprüft werden müssen. Die Angabe font-display swap zeigt sofort eine Ersatzschrift und tauscht später, optional verzichtet notfalls ganz auf den Tausch. Gegen den Sprung beim Tausch helfen size-adjust und ascent-override, die die Ersatzschrift maßlich an die Zielschrift angleichen. Wer nur die wirklich benutzten Schnitte lädt, spart zusätzlich Datenvolumen.
Beispiele aus dem Mittelstand
- Eine Marke lädt zwei Schnitte statt sieben und spart damit mehrere hundert Kilobyte auf jedem Erstaufruf.
- Nach dem Umzug von einem externen Schriftdienst auf eigene Dateien entfällt eine Fremdverbindung und die Datenschutzfrage dazu.
@font-face {
font-family: "Inter";
src: url("/fonts/inter-400.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
/* Ersatzschrift maßlich angleichen, damit der Tausch nicht springt */
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 90%;
}<link rel="preload" as="font" type="font/woff2" href="/fonts/inter-400.woff2" crossorigin />Folge-Fragen
swap oder optional?
swap zeigt die Zielschrift auf jeden Fall, optional verzichtet bei langsamer Verbindung darauf. optional ist besser für CLS, swap besser für die Markenwirkung.
Sind externe Schriftdienste ein Datenschutzproblem?
Beim Abruf fließt die IP-Adresse an den Anbieter. Selbst hosten löst die Frage und ist gleichzeitig schneller.
Wie viele Schnitte brauche ich wirklich?
Meist zwei bis drei. Jeder weitere Schnitt kostet eine eigene Datei, ohne dass der Unterschied im Entwurf sichtbar wäre.
Warum blitzt kurz eine andere Schrift auf?
Das ist der Tausch von Ersatz- auf Zielschrift. Mit angeglichenen Ersatzmaßen bleibt zumindest das Layout ruhig.
Font-Loading-Strategie in der Praxis.
Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.
SEO-Performance