Docs | SupaSaas NextJs Boilerplate

NextJs comes with built-in support for Google Fonts. You can easily add custom fonts to your application by importing them in your @/lib/fonts.ts file.

@/lib/fonts.ts
import { Inter, JetBrains_Mono, Montserrat } from "next/font/google";

const fontSans = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
  fallback: ["system-ui", "arial"],
});

const fontMontserrat = Montserrat({
  subsets: ["latin"],
  variable: "--font-montserrat",
  fallback: ["system-ui", "arial"],
});

const fontMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
  fallback: ["system-ui", "arial"],
});

export const fonts = [
  fontSans.variable,
  fontMono.variable,
  fontMontserrat.variable,
];

You can then assign the fonts in your @/styles/globals.css file.

@/styles/globals.css
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
}

This will apply the Montserrat font to all headings in your application.

You can apply default fonts for your application by adding the class name to the <body> element found in the @/app/layout.tsx file.

@/app/layout.tsx
<body
  className={cn(
    "bg-background-alt flex min-h-screen flex-col font-sans",
    fonts
  )}
>
  <ThemeProvider attribute="class" forcedTheme="dark">
    <Providers>{children}</Providers>
  </ThemeProvider>
</body>

In this example, we add font-sans to the body element, which is mapped to the font Inter. This will apply Inter as default font to the entire application.

Please note any customizations (like the headings we added in the globals.css file) will override the default font settings.