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.
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?
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?