Wie lädst du Webfonts, ohne Layout Shift zu verursachen oder Text zu verstecken?

Hoste die Font selbst, preload die eine Datei, die für den ersten Paint gebraucht wird, und nutz font-display swap, damit Text sofort sichtbar ist. Danach nimmst du den Sprung raus, indem du die Metriken des Fallbacks mit size-adjust, ascent-override und descent-override angleichst oder eine generierte Fallback-Face verwendest. Subsette die Font auf die Zeichen, die du tatsächlich nutzt, liefere nur woff2 aus und lade keine mehreren Schnitte, wenn eine Variable Font den Bereich abdeckt.

Der Sprung passiert, weil die Fallback-Font andere Metriken hat, wenn also die echte Font ankommt, fließt jede Zeile neu um und alles darunter verschiebt sich. Es sind also zwei Probleme: wann der Text erscheint und wie stark er sich bewegt, wenn er wechselt. Für das Erste hoste ich die Font selbst, preloade nur die Datei, die für die erste Ansicht nötig ist, und nutze font-display swap, damit niemand auf einer langsamen Verbindung auf einen leeren Textblock starrt. Für das Zweite überschreibe ich die Fallback-Metriken, size-adjust plus ascent- und descent-override auf einer lokalen Fallback-Face, damit der Fallback fast exakt denselben Platz einnimmt und der Wechsel kaum sichtbar ist. Der Rest ist Hygiene: nur woff2, auf den tatsächlich genutzten Zeichensatz subsetten und eine Variable Font statt vier statischer Schnitte. Auf einer Seite, die drei Schnitte von einem Fremd-Origin gezogen hat, hat der Wechsel auf eine selbst gehostete, subsettete Variable Font rund 180 Kilobyte gespart und CLS von etwa 0,18 auf unter 0,02 gebracht.