3 ms·
This is really thorough and nuanced work, and so many websites could benefit from this. But oh my god, it’s so complex! I wish the platform (http/HTML/css) cou
by LeonB 6y ago
This is really thorough and nuanced work, and so many websites could benefit from this.
But oh my god, it’s so complex! I wish the platform (http/HTML/css) could support this natively without any need for javascript or tricks of any sort. Some of it looks like irreducible complexity: particularly “choosing a fallback font that closely matches the size and style of the eventual font”. The platform can’t do that for you. But surely a “sufficiently advanced” HTML/css will be just a little wiser and let you say, with one well placed keyword, “this is the font I want to use, but don’t wait for it, use it once it’s available and use this one in the meantime.”
(And I’m thinking that inlining the fonts as base64 encoded stuff might be more optimum and prevent stuff moving around. It’s such a tiny point, I don’t think engineers everywhere in the world should all have to spend effort on this.)
- city41 6y agoThat's exactly what I was thinking while reading this. Whenever I see things like "apply the font style to a nbsp, to ensure the DOM loads it" I always wonder why web developers so often have to "trick" the browser. Why can't we flesh out the common use cases and come up with something clean that web developers and browser vendors can agree on? As for using a fallback font that closely matches to minimize the impact of the switch over, how realistic is that? In the demo I felt the fallback font looked very different from the final font (in weight, style and size) and I'm wondering if it's because I'm on Android and the author chose fallbacks that only match on their OS?
- alwillis 6y agoAs for using a fallback font that closely matches to minimize the impact of the switch over, how realistic is that? It would a lot more realistic if browsers other than Firefox supported font-size-adjust, which allows the fallback font to mimic the metrics of your primary font. Here's an article from 2010 that describes how it works: https://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/ https://webdesignernotebook.com/css/the-little-known-font-si...