javascriptreactjsnext.jsgoogle-fonts

How to import custom google fonts in NextJS 13? Link tags not working

I am trying to use Google Fonts on a Nextjs project with the newest version 13 and I can't import Google Fonts (i.e. Poppins) correctly.

In the past I just added the link tags to the _document.js or _app.js file and that was it.

I am trying it this way without success:

  <Head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"></link>
  </Head>

In the past, an alternative was to import the Google fonts on the global CSS stylesheet with @import but this method doesn't work either:

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,700");

Please let me know how can I do it on Next version 13 and up

Solution

  • To use Google fonts on a Next 13+ project you can do it this way:

    app/layout.js

    import { Poppins } from 'next/font/google';

const poppins = Poppins({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-poppins',
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
});

export const metadata = {
  title: 'Page Title',
  description: 'Page Description',
}

export default function RootLayout({ children }) {
  return (
    <html className={`${poppins.variable}`}>
      <body>{children}</body>
    </html>
  )
}

    And then in any CSS file you can use that font this way

    .class {
  font-family: var(--font-poppins);
}