Provavelmente vai ter que usar dessa forma css-variables

Importa a fonte no _app e adiciona a classe em uma div envolvendo toda aplicação.

//_app.js
import { Roboto } from '@next/font/google'

const roboto = Roboto({ 
  weight: '400',
  variable: '--roboto-font'
})

export default function App({ Component, pageProps }) {
  return (
    <div className={roboto.className}>
        <Component {...pageProps} />
    </div>
  );
}

/* globals.css */
html, body { 
    font-family: var(--roboto-font);
}