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-...
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-...
If 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.
Couldn'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
> 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.
Not if the styles + fonts are all in the <head>?
wouldn't the problem be the fonts are basically in every single request and uncacheable then?
Your CSS should be cacheable shouldn't it?
^ this
That increases FONC (flash of no content)