time to play the web’s hottest new game: is it a skeleton loading screen OR an invisible web font
-
-
Replying to @zachleat
I’m curious: Do you know of any considerations for smarter ways to load fonts?
1 reply 0 retweets 0 likes -
I can imagine, for example, an “essence” of a font extracted so that you know its metrics and nothing else, load that first (or even embed?), and render the page with the correct dimensions and little gray blocks where the lines or even words will eventually appear.
3 replies 0 retweets 1 like -
Replying to @mwichary
Oh, hmm—that’s an interesting idea. Metrics-only may be super small but it’d still render as invisible text, if I understand you correctly. You’d minimize/prevent reflow but at the cost of fallback text. It’d be a much worse failure case
1 reply 0 retweets 2 likes -
-
Replying to @mwichary
Zach Leatherman Retweeted Zach Leatherman
I thought you meant a demo-able thing you could implement today using two separate font files. (Discussion continued here: https://twitter.com/zachleat/status/1053311312254681088 …)
Zach Leatherman added,
1 reply 0 retweets 0 likes -
Replying to @zachleat
Yeah, I could build a demo. I’m still not sure what you meant by “much worse failure case” – you mean if we built it today, and it stayed at the “metrics-only” font forever?
1 reply 0 retweets 1 like -
Replying to @mwichary
Well, you’d basically be implementing your own FOIT with metrics right? And it wouldn’t get the 3s fallback safety net (for free). You’d have to build that in. I’d love to see a demo!
1 reply 0 retweets 0 likes -
Replying to @zachleat
Yeah, I mean eventually I’m thinking of this as an actual built-in measure supported by JS/CSS, with some tooling that makes the metric extraction turn-key.
1 reply 0 retweets 1 like -
Replying to @mwichary
I don’t want to overcomplicate your idea but I wish loading fonts shared more traits with how videos are loaded. For example, your font metrics idea seems similar to `video preload="metadata"`. Further, I wish we could “seek” to download only a subset of glyphs from a file too.
1 reply 0 retweets 0 likes
No, no, that’s perfect. I didn’t know this existed.
-
-
I think there are two parts to this in my head: a) actual technical extracting and loading that data (including tooling possible to make it happen) b) visual change, for example by showing outline blocks where text will eventually be (stylable?)
0 replies 0 retweets 0 likesThanks. Twitter will use this to make your timeline better. UndoUndo
-
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.