Next-font-inter NPM

next-font-inter

Inter from Google Fonts is wildly outdated and has no italics. This package tracks the latest version of Inter (v4+) and provides it as a pre-configured next/font.

Usage

npm install next-font-inter

"Vanilla" Usage

// app/layout.tsx

import { InterVariable, InterDisplay } from "next-font-inter";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
      className={`${InterVariable.className} ${InterDisplay.className}`}
    >
      <body>{children}</body>
    </html>
  );
}

With Tailwind

// app/layout.tsx

import { InterVariable, InterDisplay } from "next-font-inter";
import "./globals.css"; // See https://nextjs.org/docs/app/building-your-application/styling/tailwind-css#importing-styles

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
      className={`${InterVariable.variable} ${InterDisplay.variable}`}
    >
      <body>{children}</body>
    </html>
  );
}

// tailwind.config.js

/** @type {import("tailwindcss").Config} */
const config = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          "var(--font-inter-variable)", // CSS variable name for `InterVariable`
        ],
        display: [
          "var(--font-inter-display)", // CSS variable name for `InterDisplay`
        ],
      },
    },
  },
};

module.exports = config;