1. What I'm trying to accomplish
I am using next/local/font using Next 12 and tailwindCSS to apply this font at all pages, even the pages with Dynamic Routes.
My problem is that my local fonts are not applying when I move to a dynamic routing page, sepecifically only on the first visit

2. My code

// pages/_app.tsx
// fonts are in the pages/Fonts folder
const gmarket = localFont({
  src: [
    {
      path: './fonts/GmarketSansLight.woff',
      weight: '400',
    },
    {
      path: './fonts/GmarketSansMedium.woff',
      weight: '600',
    },
    {
      path: './fonts/GmarketSansBold.woff',
      weight: '700',
    },
  ],

  variable: '--gmarket',
});

function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps<{ session: Session }>) {
  return (
    <>
      <main className={`${gmarket.variable} font-sans`}>
        <Component {...pageProps} />
      </main>
    </>
  );
}

export default MyApp;

3. logs/errors I am receiving
There's no error in my code, but when I move to a dynamic routing page in my application, my local fonts are not applying. It only happens at the first time when I move to a dynamic routing page. After the first visit, the local fonts are applying right.

4. What I've tried to solve the issue
- I tried to put font-display: 'swap' property, but it's causing FOUT which I don't want this to be happened.
- I tried to put local fonts in the style tag in the _app.tsx, but not woking.

Also, I put my local fonts variable in the tailwind.config.js

theme: {
    extend: {
      fontFamily: {
        sans: ['var(--gmarket)'],
      },
    }
}

but it doesn't work. It works when I put this fontFamily inside of theme not extend

Is there any way to have my local fonts applied in every pages, including pages with the dynamic routes?