How can I use @next/font with mantine?

[round quest]

Am looking for a way to use @next/font with mantine.

[ionic raven]

Yes, you can, follow next.js documentation

[round quest]

I checked the documentation but how can I put it in mantine provider
I tried this

const font = Roboto({ style: "normal", weight: "500", subsets: ["latin"] });

export default function App({ Component, pageProps }: AppProps) {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{ primaryColor: "orange" }}
    >
      <Box className={font.className}>
        <AppHeader />
        <Component {...pageProps} />
        <AppFooter />
      </Box>
    </MantineProvider>
  );
}