next.js: `@next/font` does not work in custom `pages/_document`

I understand i don’t need to import it in layouts since app is rendered on every page. But I don’t want a wrapper around everything on every page just to add a font. So the alternative would be to apply it to some existing markup, which would only exist in our layouts. For now, I’ve gone with a CSS variable workaround like the following:

import "../styles/globals.css"
import type { AppProps } from "next/app"
import { Sans } from "../fonts"

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <style jsx global>{`
        :root {
          --font-sans: ${Sans.style.fontFamily};
        }
      `}</style>
     <Component {...pageProps} />
    </>
  )
}

and then define the font family on the HTML element in globals.css html { font-family: var(--font-sans); }. I guess we’ll come up with a cleaner solution to this when the app folder is finalized and we can migrate over.

@PeterKottas thanks for pointing out the dependence on styled-jsx I didn’t actually know what those attributes were doing. I removed that and it shaved about ~2kb, so not hugely significant but worth removing since we aren’t using it anywhere else. What I now am using:

import "../styles/globals.css"
import type { AppProps } from "next/app"
import { Sans } from "../fonts"

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        :root {
          --font-sans: ${Sans.style.fontFamily};
        }`}} />
     <Component {...pageProps} />
    </>
  )
}

It is probably fine to apply the font family as you have there, I was just worried about specificity issues having that font family defined in style tag vs all of our other styles coming from stylesheets - I think you could do the same to remove the styled JSX usage with dangerouslySetInnerHTML.

import { barlow } from "@/fonts";

import { useIsomorphicLayoutEffect } from "react-use";

export default function App({ Component, pageProps }) {
  useIsomorphicLayoutEffect(() => {
    document.body.style.setProperty("--font-family", barlow.style.fontFamily);
    document.body.className = cn(barlow.className, barlow.variable);
  }, []);

  return <Component {...pageProps} />;
}

@alex-pominov solution worked for me, but I had to add on className too

Google fonts does not seem to be working at all in app.

In our project we also had to set font variable at body level, to cover modal and popover styles that renders in portals. That’s what I using:

// _app.tsx

import "../styles/globals.css"
import { Sans } from "../fonts"
import type { AppProps } from "next/app"
import { useIsomorphicLayoutEffect } from 'react-use'

export default function App({ Component, pageProps }: AppProps) {

   useIsomorphicLayoutEffect(() => {
    document.body.style.setProperty('--font-family', Sans.style.fontFamily);
  }, []);
  
  return <Component {...pageProps} />
}

Try using pages/_app.tsx not /pages/_document.tsx 🙏🏼

Learn more here: https://nextjs.org/docs/basic-features/font-optimization#google-fonts

don’t belive it’s supposed to

Good tip about the preload attribute! I totally missed that. Thanks. Now I am quite happy with the style approach. The only change I made compared to your version is I wrapped the style attribute with the next Head element. I don’t think it’s necessary these days, but I still think it’s best practice and it could theoretically prevent FOUT even further.