font-display: optional und rel=preload kombinieren

Diskutiere font-display: optional und rel=preload kombinieren im HTML Forum im Bereich Programmierung; Hallo, um layout shifts durch nachladende Schriften zu verhindern, wird hier https://nitropack.io/blog/post/fix-cls#fonts empfohlen...
  • font-display: optional und rel=preload kombinieren Beitrag #1
C
cssJoe
New member
Beiträge
1
Punkte Reaktionen
0
Hallo,
um layout shifts durch nachladende Schriften zu verhindern, wird hier

https://nitropack.io/blog/post/fix-cls#fonts

empfohlen, font-display: optional und rel=preload zu kombinieren.

The optional value won’t cause a re-layout when the web font is ready. At the same time, the preloaded font will likely meet the first paint, ensuring no layout shifts occur.

Ich frage mich wie das gehen soll, da rel=preload in einen <link> im HTML eingefügt wird und font-display: optional ein Attribut (sagt man so?) im @font-face ist. D.h. ich müsste die Schrift zweimal einbinden, was dann zu zweimaligem Laden führen würde, was nicht besonders zielführend wäre.

Also meine Frage: Wie kombiniere ich font-display: optional und rel=preload beim Laden einer Schriftart?
 
Thema:

font-display: optional und rel=preload kombinieren

Oben Unten