Include Inter Font Locally? about nextjs-advanced-starter HOT 2 CLOSED

Thanks for your comment! As of next.js 10.2.0 google fonts are automatically optimized already: https://nextjs.org/blog/next-10-2#automatic-webfont-optimization

from nextjs-advanced-starter.

Yes, although in the case of Next.js automatically optimizing webfonts, it's important to note the optimized stylesheet is still calling external resources (the .woff/.woff2 files) which are loaded from external sources. For example, the default Inter stylesheet loads the normal 400pt Inter .woff file from a URL that looks like this: https://fonts.gstatic.com/s/inter/v3/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZxhjp-Ek-_EeAmM.woff. These requests are repeated for each included font-weight and font-style.

Though Google does a great job at optimizing, these are still external network requests. When using PWAs or running Next.js apps only on local networks (not common, but I have seen it done), having fonts available locally becomes important. Some small amount of your "advanced" users may need such a feature — for example, I am adding this on my end.

Also, for use-cases like running Next.js inside Electron, where the browser is known to support variable fonts, using a variable font (which Inter supports) is another way to eliminate 10+ network requests for full font-weight support. (These variable fonts also have the added advantage of supporting in-between font-weight values, like font-weight: 420.)

Next.js works great with local fonts as well! See https://kirazhang.com/posts/nextjs-custom-fonts for an idea.

If undesired, this would also be easy to remove (just by deleting one folder) and it would also have no impact on performance if the user does not remove it. Plus, the Google Font plugin would still be the default, but the README could note the option of using local fonts.

Again — not my repo — so I'm not trying to force anything! I just think it might be worth considering :). Thank you!

from nextjs-advanced-starter.