CSS/Fonts: It's really unfortunate that the typical patterns for loading web fonts from providers (Google Fonts, etc) start with a render-blocking third-party request just to get the @font-face CSS rules (note: not the actual fonts yet) which should ideally be in our own CSS from the start. I should blog about the reasons we can't do that reliably with many providers, but it's such a shame we can't because leading with a performance anti-pattern transfers the cost of the service to the users.
Sure, self-hosting fonts is ideal, but I suspect the most important part is our ability to self-host the CSS font-face rules that reference the fonts, wherever they are.
@scottjehl Literally the most annoying thing. I'll happily pull your fonts from the CDN, but give me the damn font face rules!
@konnorrogers @scottjehl What's the problem? Go to e.g. https://fonts.googleapis.com/css2?family=Roboto&display=swap and copy&paste the contents to your CSS stylesheet.
@niutech @konnorrogers I'll write it up soon but the issue is the font file hashes periodically change and aren't reliable. That's just the google fonts situation, among others
@scottjehl @niutech @konnorrogers Pulling the CSS as part of a build process seems easy. I never understood why people load a few lines of easy CSS like that.
@svgeesus @niutech @konnorrogers Yeah, maybe. I'd love to see a reliable workaround. The issue, as I've known it for a while at least, is that the font file urls aren't stable for long.
@scottjehl @svgeesus @niutech @konnorrogers That, and different browsers/OSes get different fonts so those URLs will be different for them. Most famously, Windows wil get hinting. Try loading the URL above on an Apple machine and on a Windows machine.
@pixelambacht @svgeesus @niutech @konnorrogers Yeah. I'd like to know more about whether or not one of the woff2 formats works across devices, and the cost if it means including the hinting.
@scottjehl @pixelambacht @svgeesus @niutech @konnorrogers (fwiw I’m reminded of this old blog post when I worked through Rubik and found that hinting was ~25% of the file weight https://www.zachleat.com/web/css-tricks-web-fonts/)
@scottjehl @pixelambacht @svgeesus @niutech @konnorrogers with a shout out to this feature request, too: https://github.com/w3c/csswg-drafts/issues/3926