next-google-fonts | tiny Next.js helper for loading Google Fonts fast

In this example, we're going to add Inter (specifically weights 400 and 700) to a Next.js app. See joebell.co.uk for a working example.
Add the package to your Next.js project: npm i next-google-fonts
Create a custom Head component. It's important to acknowledge that next-google-fonts is a small next/head component and should not be nested inside next/head. To solve this, wrap both components with a Fragment. // components/head.js import * as React from "react"; import NextHead from "next/head"; import { GoogleFonts } from "next-google-fonts"; export const Head = ({ children, title }) => ( <React.Fragment> <GoogleFonts href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" /> <NextHead> <meta charSet="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta httpEquiv="x-ua-compatible" content="ie=edge" /> <title>{title}</title> {children} </NextHead> </React.Fragment> );
Add the requested Google Font/s to your styles with a sensible fallback. It really doesn't matter whether you're using CSS or Sass or CSS-in-JS: body { font-family: "Inter", sans-serif; }
Run your Next.js app to see the results in action! You should expect to see the fallback font first, followed by a switch to the Google Font/s without any render-blocking CSS warnings. Your font/s will continue to display until your app is re-hydrated. If JS is disabled, only the fallback font will display.