Hacker News new | ask | show | jobs
by damieng 272 days 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-...
2 comments
jraph 271 days ago
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.

link
olivia-banks 271 days ago
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
link
erikpukinskis 271 days ago
Not if the styles + fonts are all in the <head>?
link
booi 271 days ago
wouldn't the problem be the fonts are basically in every single request and uncacheable then?
link
kevincox 271 days ago
Your CSS should be cacheable shouldn't it?
link
kellengreen 271 days ago
^ this
link
Velocifyer 271 days ago
That increases FONC (flash of no content)
link
dspillett 271 days 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.

link