News for hackers. Stuff that matters.

A comment on How to self-host a web font from Google Fonts.

Re:How to self-host a web font from Google Fonts by damieng on Monday September 15, 2025 @10:52AM (#45250415)
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-...

[ Parent | on HN ]
Re:How to self-host a web font from Google Fonts by lelandfe on Monday September 15, 2025 @11:58AM (#45251276)
The default method of loading CSS fonts has no FOUC, so no need to base64 encode. `font-display: swap` introduces FOUC but with a quicker first paint, which some find preferable (in Lighthouse terms, you're trading CLS for FCP).

If you're base64'ing with the intent of loading the font file sooner, just use:

     <link rel="preload" href="/assets/my-font.woff2" as="font" type="font/woff2" crossorigin>
This has the downside of loading a WOFF2 file for all browsers, even ones that don't support WOFF2. These days, ~all browsers support that format: https://caniuse.com/woff2
[ Parent | on HN ]
Re:How to self-host a web font from Google Fonts by olivia-banks on Monday September 15, 2025 @11:34AM (#45250944)
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
[ Parent | on HN ]
Re:How to self-host a web font from Google Fonts by erikpukinskis on Monday September 15, 2025 @11:37AM (#45250981)
Not if the styles + fonts are all in the <head>?
[ Parent | on HN ]
Re:How to self-host a web font from Google Fonts by booi on Monday September 15, 2025 @12:27PM (#45251669)
wouldn't the problem be the fonts are basically in every single request and uncacheable then?
[ Parent | on HN ]
Re:How to self-host a web font from Google Fonts by kellengreen on Monday September 15, 2025 @01:05PM (#45252215)
^ this
[ Parent | on HN ]
Re:How to self-host a web font from Google Fonts by kevincox on Monday September 15, 2025 @04:22PM (#45254473)
Your CSS should be cacheable shouldn't it?
[ Parent | on HN ]
Re:How to self-host a web font from Google Fonts by Velocifyer on Monday September 15, 2025 @12:54PM (#45252029)
That increases FONC (flash of no content)
[ Parent | on HN ]
Re:How to self-host a web font from Google Fonts by dspillett on Tuesday September 16, 2025 @07:38AM (#45260859)
> 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.

[ Parent | on HN ]
Re:How to self-host a web font from Google Fonts by jraph on Monday September 15, 2025 @12:21PM (#45251586)
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.

[ Parent | on HN ]