Using Google Fonts with Next.js

[joe-bell]

Happy Friday Next.js friends 👋

I've just published a post detailing my Next.js helper: next-google-fonts.

It ensures your Google Fonts load fast and asynchronously.

I've used this approach in a few projects now and it's proved to be pretty successful. If you use Google Fonts, I'd love to hear what you think.

[TheHolyWaffle]

What's the advantage of this compared to simply self-hosting google fonts? In my understanding, self-hosting fixes the flash of unstyled text.

Is there less CSS render blocking?

For example, see https://www.npmjs.com/package/typeface-roboto

[joe-bell]

Fair question, but I'm not sure I'd agree with "simply self-hosting".

For the absolute-optimum self-hosted fonts you'll need to configure only the things you need like character sets and font-weights. Taking a look at that package for example, you'll be bringing all the font-weights (which can be configured in Google Fonts), all the characters sets for the font-face, and to top it off you'll still have render-blocking CSS (Webpack isn't treating it as non-critical).

Google's hosted on a CDN and you can tailor font-families and their weights to your needs (plus leverage font-display: swap;). I'd argue you get better performance with this than using a self-hosted typeface- package, but of course if you have the time to manage character sets and weights manually, you would see a benefit

If that makes sense?

[TheHolyWaffle]

It does, there seems to be no reason to not use your approach. Thanks!

[eric-burel]

Hi, does your approach avoid Flash of Unstyled Font (FOUT) just after the server-side render? Currently my app displays as Arial before "Source Sans Pro" is loaded from the URL.

[eric-burel]

Ok in the Readme you seem to say that we will have a flash of the fallback font so FOUT. Do you think there's a way to get the font in cache? Will it happen on each page reload?

[eric-burel]

Eventually I learnt something: you can play around with the display option. @joe-bell what is your opinion on a non swap display to avoid any FOUT? Does it really defeat your optimizations? FOUT are really not pleasurable to see but I'd like to keep the website as fast as possible.

[joe-bell]

If you choose a non-swap option you will see FOUT

Flash of fallback font is not FOUT, that's the fallback font. FOUT is when you don't see any text!

[eric-burel]

It is a a Flash of Unstyled Text, so kind of a FOUT if you display the fallback font? Flash of Invisible Text is when you don't see the text. Anyway playing around with the display around it seems that I have to pick one of those 2 scenarios, in my case having a non visible text for a very short amount of time seems more relevant
(edit: all that is my own understanding, I may be completely wrong)