3 ms·
The solution to this is to simply not display anything while the page loads.
by pmoriarty 4y ago
The solution to this is to simply not display anything while the page loads.
- lelandfe 4y agos/page/font, which is what `font-display: optional` does, sort of. There's a 100ms blank grace period, and if the font's not ready by then it uses the fallback font. (It'll still load, and be ready in cache for the next page visit)
- usrn 4y agoSo here you get the worst of both on a slow connection. - The page takes an extra 100ms to load - ~ a minute later (when you're halfway through reading it) the content will jump by some large amount. There isn't a nice way to do custom fonts on the web and you should just avoid them.
- lelandfe 4y agoSorry, no part of your comment is true. This is easily the best option for slow connection/device users, and it comes at the expense of the design. > The page takes an extra 100ms to load Nope. Slow connections' floor for first paint is 100ms when using `font-display: optional` – not an additional 100ms. The page is still loading like normal in this period. (If you're already under a 100ms FCP for 3G users, you know all of this already) > the content will jump by some large amount `font-display: optional` is literally designed to prevent this from ever occurring. Either the font is ready for first paint in 100ms, or another font is used.