next-font-inter

Inter font for Next.js.

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

``bash
npm install next-font-inter
`

$3

`tsx
// app/layout.tsx

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

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

);
}
`

$3

`tsx
// 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 (
lang="en"
className={${InterVariable.variable} ${InterDisplay.variable}}
>
{children}

);
}
`

`typescript
// 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;
`

License

Inter is licensed under the SIL Open Font License.

next-font-inter` is licensed under MIT.