6 ms·
Even better download it, subset it then base64 encode it into your CSS for zero FOUC. https://damieng.com/blog/2021/12/03/using-variable-webfonts-for-speed/ ht
by damieng 1y ago
Even better download it, subset it then base64 encode it into your CSS for zero FOUC.
https://damieng.com/blog/2021/12/03/using-variable-webfonts-for-speed/ https://damieng.com/blog/2021/12/03/using-variable-webfonts-...
- olivia-banks 1y agoCouldn't this increase FOUC? At least before you could load in your style-sheet before the font, but if you embed the font inside you get no styling at all until it can fetch all of the data, correct
- erikpukinskis 1y agoNot if the styles + fonts are all in the <head>?
- booi 1y agowouldn't the problem be the fonts are basically in every single request and uncacheable then?
- kevincox 1y agoYour CSS should be cacheable shouldn't it?
- kellengreen 1y ago^ this
- Velocifyer 1y agoThat increases FONC (flash of no content)
- dspillett 1y ago> Couldn't this increase FOUC? Not if the font data is in a style tag in head, or otherwise before any content that's display might need, or be indirectly affected by, the font. It will delay first paint on slow connections (all connections, in fact, but on a strong link you'll not notice) though.
- deleted 1y ago[deleted]
- jraph 1y agoIf you do this, you make the page slower to load for people blocking external fonts. Not doing it is also nicer for people with slow/unreliable network access, where they can block fonts, or even if they don't block them, can access your page more quickly and have a render without the custom font.