[Font Optimization] Asynchronous non-critical font styles

Feature request

Whilst I hugely appreciate @prateekbh’s work to enhance the external font loading experience, it would be nice to support (or maybe even make default) the option to treat these font styles as non-critical.

RE: https://github.com/vercel/next.js/pull/14746, https://github.com/vercel/next.js/pull/16031

Describe the solution you’d like

An async option could be defined in the experimental config (but I would argue it might be best to assume that font styles are non-critical and set this to true by default) which would extract the external CSS into a separate CSS file.

This CSS file would be referenced in the head, and set to media="print" on initial load then to media="all" on app hydration. With lots of modern CSS-in-JS libraries extracting to critical CSS, this would avoid clashing opinions on what should actually by considered crticial.

Describe alternatives you’ve considered

I built and maintain next-google-fonts but this doesn’t extract CSS at compile time; it just asynchronously loads Google Fonts.

Additional context

Again, thanks so much for your work on this @prateekbh. Happy to help out where I can

[prateekbh]

Well choosing display=swap makes your text appear faster but definitely has a problem of FOUT. I will soon look into the effects of display:optional + adding a preload with this optimization. This option adds a 100ms wait to FCP and can render the text in actual font without FOUT.

I would suggest people to opt for the async css when they are very sure that fonts are of least interest but not something to come out of the box, given that if you’re adding a font in the first place you might want it to load faster as well than later.

[joe-bell]

Hey @willemmulder, I think this might be useful to add over at #12984