Variable Local Fonts With Next.js

Next.js has a font module load local and google fonts but their documentation isn't clear on how to load variable local fonts properly.

I have tried to use Inter variable font on my website and waned to share how I did it.

import localFont from "next/font/local";

export const fontSans = localFont({
  src: [
    {
      path: "Inter-4.0/InterVariable.woff2",
      style: "normal",
    },
    {
      path: "Inter-4.0/InterVariable-Italic.woff2",
      style: "italic",
    },
  ],
  weight: "100 900",
  display: "swap",
  variable: "--font-sans",
  declarations: [
    {
      prop: "unicode-range",
      value: "U+0020-007F",
    },
  ],
});

From here, the documentation is pretty clear. You just add fontSans.variable to className on body tag, prepend var(--font-sans) to your font-family and you are set.

The code snippet in this post also uses a unicode-range. To read more about it you can read this post.