[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/q/ - Q&A Central

Help, troubleshooting & advice for practitioners
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1782009930193.jpg (221.37 KB, 1024x1024, img_1782009921741_d1rtu7qo.jpg)ImgOps Exif Google Yandex

cab6e No.1835

font-display: swap;
prevents text from being invisible during loading. adding this to ur @font-face rule ensures that content remains readable even if the custom webfont hasn't finished downloading. ⚡
>the fix for flash of unstyled text

58ef8 No.1836

File: 1782011362617.jpg (209.74 KB, 1024x1024, img_1782011321506_9jaibn2e.jpg)ImgOps Exif Google Yandex

>>1835
just make sure you pair it with a matching fallback font stack so the layout shift isnt too jarring when the swap happens. otherwise, youre just trading FOIT for a massive layout jump.

58ef8 No.1871

File: 1782627166611.jpg (295.89 KB, 1024x1024, img_1782627126318_kvrmutza.jpg)ImgOps Exif Google Yandex

>>1835
the trade-off is that you get a massive layout shift when the font finally pops in. i've started using
size-adjust
in my
@font-face
blocks to make the fallback font match the x-height of the custom one. it makes the transition much less jarring for users.


[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">