Google Fonts

Next.js provides an easy way to include any Google Font into a website.

Shipped is currently configured to use Inter.

This is how, and how you can change it.

src/app/layout.tsx
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

/* ... */

<body className={inter.className}>
    <Providers>{children}</Providers>
</body>

If you want to change the font family, you can do for instance

import { Outfit } from "next/font/google";


const outfit = Outfit({ subsets: ["latin"] });

/* ... */

<body className={outfit.className}>
    <Providers>{children}</Providers>
</body>

Last updated