If you are still using the next.js version <= 12. you can do this

/* /styles/global.css */

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/rubik/Rubik-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/rubik/Rubik-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/rubik/Rubik-Italic.ttf');
    font-weight: normal;
    font-style: italic;
}

If you are using a newer version like 13 and above, you can do this from this Link

In the first step, you need to define your local font(s), and then you need to pass it like a CSS module class.

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}