Support for NextJS 10 automatic Google Font Optimization about next-google-fonts HOT 5 CLOSED

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?

from next-google-fonts.

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.

from next-google-fonts.

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!

from next-google-fonts.

Done! Thanks @elliottpost

from next-google-fonts.

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.

from next-google-fonts.