Next JS v13: How to add font-weight variant of google fonts using @next/font

Question

After Next JS v13, @next/font helps for best performance. Before the package existed, before I used the CDN @import google font in my global CSS

/* path: ./styles/global.css */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

Now I want to migrate and using @next/[email protected]

/* path: ./pages/_app.tsx */
import { Poppins } from "@next/font/google";

const poppins = Poppins({
  weight: "800", // I want this font-weight has 400,500,600,700,800,900
});

function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${poppins.style.fontFamily};
        }
      `}</style>

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

I've been try to using array instead:

const poppins = Poppins({
  weight: ["400", "500", "600", "700", "800", "900"],
});

but the font used always 400 only

Using CDN on CSS:

Using @next/[email protected]:

I want to make the font-weight has 400,500,600,700,800,900 similar like CDN on my CSS. How to make it work and keep it simple? | Expecting an answer on how to use @next/font to add multiple font weights at once.

Thanks

Answer 1

Before the feature was released in the latest version of Next.js (as of the date of this post), it was not possible to fill the weight object with an array. However, the current version of Next.js (v13.4.x) now supports using an array instead.

const poppins = Poppins({
  weight: ["400", "500", "600", "700", "800", "900"],
});

Available docs: https://nextjs.org/docs/pages/api-reference/components/font