Next.js Guide

To integrate Typeweave fonts into your Next.js project, follow the steps below. This guide covers both the App Router (Next.js 13+) and Pages Router approaches.

1. Installation

First, install the font package you want to use:

npm install @typewe/inter

2. App Router (Next.js 13+)

For Next.js 13+ with the App Router, import fonts in your root layout file:

// app/layout.tsx
import '@typewe/inter/css/index.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="font-sans">
        {children}
      </body>
    </html>
  );
}

Multiple Fonts

You can import multiple fonts in the same file:

// app/layout.tsx
import '@typewe/inter/css/index.css';
import '@typewe/playfairdisplay/css/index.css';
import '@typewe/robotomono/css/index.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="font-sans">
        {children}
      </body>
    </html>
  );
}

3. Pages Router (Next.js 12 and earlier)

For the traditional Pages Router architecture, import fonts in your _app file:

// pages/_app.tsx
import '@typewe/inter/css/index.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

4. Using with Tailwind CSS

To use Typeweave fonts with Tailwind CSS in Next.js, first import the font in your layout as shown above, then configure Tailwind:

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        serif: ['Playfair Display', 'serif'],
        mono: ['Roboto Mono', 'monospace'],
      },
    },
  },
  plugins: [],
}
export default config

Then use the fonts in your components with Tailwind classes:

export default function MyComponent() {
  return (
    <div>
      <h1 className="font-sans font-bold text-4xl">
        Heading with Inter
      </h1>
      <p className="font-serif italic">
        Paragraph with Playfair Display
      </p>
      <code className="font-mono">
        Code with Roboto Mono
      </code>
    </div>
  );
}

5. Using with CSS Modules

You can also use Typeweave fonts with CSS Modules:

/* styles/Home.module.css */
.title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
}

.description {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}

// pages/index.tsx
import '@typewe/inter/css/index.css';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div>
      <h1 className={styles.title}>Welcome</h1>
      <p className={styles.description}>
        This is using Typeweave fonts
      </p>
    </div>
  );
}

6. Global Styles

For application-wide font usage, add the font family to your global styles:

/* app/globals.css or styles/globals.css */
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

Tip: Variable fonts give you access to all weights (100-900), so you can use any font-weight value without loading additional files.