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 id...
-
@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
-
Chris Lilley 🏴replied to Scott Jehl last edited by
@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.
-
Scott Jehlreplied to Chris Lilley 🏴 last edited by
@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.
-
Zach Leatherman :11ty:replied to Scott Jehl last edited by
@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/)
-
Zach Leatherman :11ty:replied to Zach Leatherman :11ty: last edited by
@scottjehl @pixelambacht @svgeesus @niutech @konnorrogers with a shout out to this feature request, too: https://github.com/w3c/csswg-drafts/issues/3926
-
Roel Nieskensreplied to Zach Leatherman :11ty: last edited by
@zachleat @scottjehl @svgeesus @niutech @konnorrogers It would be nice if IFT will allow us to patch a font with hinting. But since it's part of the glyph data my super uneducated guess is that that's too fine-grained for IFT
-
@pixelambacht @zachleat @svgeesus @niutech @konnorrogers Thanks @zachleat. Still, I'm inclined to wonder that if there were a reliable way to use font-face and point to one url, if that'd still be quite a bit faster than the current default render-blocking 3rd party round trip for font-face rules that reference a slightly better file for some browsers.
here's that thread where G says not to rely on the URLs, fwiw https://github.com/google/fonts/issues/1067#issuecomment-438848947
-
@pixelambacht @zachleat @svgeesus @niutech @konnorrogers I dropped a comment at the end to try and figure out where this is at. I'll plan to blog any findings that are useful https://github.com/google/fonts/issues/1067#issuecomment-2321425373
-
Zach Leatherman :11ty:replied to Scott Jehl last edited by [email protected]
@scottjehl @pixelambacht @svgeesus @niutech @konnorrogers fwiw just one more point here: I’ve been inlining font-face blocks at build time from Google Fonts on 11ty.dev for *years*. I’ve always heard those URLs aren’t stable, but I’ve never seen one fail in the wild