Support for NextJS 10 automatic Google Font Optimization

[elliottpost]

NextJS 10.0 (out today) changes NextJS 9.5.2 experimental feature font optimization for Google Fonts to be part of the core NextJS package vercel/next.js#17450. Will this plugin automatically use this optimization or should we revert back to dropping the <link> tag back in manually?

[joe-bell]

Just to clarify, next-google-fonts offers non-priority/asynchronous loading for Google Fonts, whereas the experimental font optimization changes are priorirty/synchronous.

I had a great convo with @prateekbh about this and you can read more here: vercel/next.js#16065

Cheers for the heads up! Perhaps it's worth me adding to the README?

[prateekbh]

FWIW I totally enjoyed brain storming with you on the discussion. This is a great solution if you decide to load fonts in a non-priority/asynchronous manner and would recommend.

[elliottpost]

Thanks, @joe-bell for the clarification! I think given that NextJS 10 moves this feature from experimental to core it's probably worth updating the README. The quickest short-term solution might just be to link to this ticket to save you from answering the same question multiple times over 😅

I use this package on my NextJS 9.5 install and it works fantastic, but when we update to NextJS 10, I'll probably opt for inline CSS since it's just a few fonts and FOUT can be avoided by inlining it at the trade off for a slightly longer initial load time. Thanks for the help!

[joe-bell]

Done! Thanks @elliottpost

[Tosheen]

Hello,
I am using nextjs v10 and its still confusing how to work with google fonts. Does the optimization comes by default now or not? Google page insights complains about the fonts and I have no idea how to solve it and I tried many things.
This is the code in my _document.js file but I dont see any benefits.

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Roboto:wght@300;400;500&family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"  />

Is there anything else I should be doing? Link to a working example would be awesome.