I've found that for this sort of thing, @next/font (https://beta.nextjs.org/docs/optimizing/fonts) is a pretty handy library (from Vercel) for Next.js projects. You can import Google Fonts as simple as:

  import { Roboto } from '@next/font/google'
  const { className } = Roboto({ weight: '500' })

Now you can add this class name to any React elements and they'll have the Roboto font. Next.js will handle all of the self-hosting and wiring behind-the-scenes (i.e. no requests made to Google from the client).

Believe this was one of the announcements to come out of the most recent Next.js conference, so info may only be available on the beta version of their docs site (linked above).