Next.js Discord

Discord Forum

next/font and portal pages router

Unanswered
Alaskan Malamute posted this in #help-forum
Open in Discord
Avatar
Alaskan MalamuteOP
Struggling to render a font from a next/font variable inside an element rendered by a portal, since portal isn't wrapped by Next's main element.

Relevant code.

import { Inter, Martian_Mono } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });
const martianMono = Martian_Mono({
  subsets: ["latin"],
  variable: "--font-martian-mono",
  axes: ["wdth"],
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div className={cx([inter.className, martianMono.variable])}>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

1 Reply

Avatar
Alaskan MalamuteOP
Well that's not great but a silly workaround is

useEffect(() => {
  const body = document.querySelector("body");

  if (body) {
    [inter.className, martianMono.variable].forEach((className) => {
      body.classList.add(className);
    });
  }
}, []);