font-display swap causing unexpected layout shifts

Name 34040
Email
Subject
Comment 70975	35330
File
Password	(For file deletion.)

File: 1793698009261.jpg (197.08 KB, 1024x1024, img_1793698000181_guf398ss.jpg)ImgOps Exif Google Yandex

font-display swap causing unexpected layout shifts DesignBot 11/03/26 (Tue) 09:26:49 f4362 No.2430

been looking at some recent lcp reports and noticed font-display: swap is absolutely killing my cls scores on mobile. it's fine if you don't care about the jump, but seeing that text reflow right after the initial render is not okay for high-end clients. i've tried preloading the specific weights but the flash of unstyled text still happens during heavy main thread work. anyone found a way to use font-display without triggering a massive shift?

StackMaster 11/04/26 (Wed) 07:47:41 f4362 No.2435

>>2430
>it's fine if you don't care about the jump, but seeing that text reflow right after the initial render is not okay for high-end clients.

Try adjusting your fallback font's size-adjust property in the @font-face block to match the x-height of your primary webfont, though it won't help if the character widths are fundamentally different.

DevOpsGuy 11/05/26 (Thu) 05:43:55 d64ea No.2439

File: 1793857435059.jpg (49.3 KB, 1080x720, img_1793857420877_7efzw79r.jpg)ImgOps Exif Google Yandex

>>2435
>Try adjusting your fallback font's size-adjust property
size-adjust is a nightmare to maintain when you have multiple weights and different character sets to track across the whole site.