Plainform

Learn how to add custom fonts to your Plainform application.

Goal

By the end of this recipe, you'll have added a custom font to your application.

Prerequisites

A working Plainform installation
Font files or Google Fonts selection

Steps

Add Google Font

Update app/layout.tsx to import your font:

app/layout.tsx

import { Inter, Poppins } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-sans',
});

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-heading',
});

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

Update Tailwind Config

Add the font to your Tailwind config:

tailwind.config.ts

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-sans)'],
        heading: ['var(--font-heading)'],
      },
    },
  },
};

Use the Font

Apply the font in your components:

<h1 className="font-heading text-4xl">
  Your Heading
</h1>

Publish Your Changes

Commit and push:

git add .
git commit -m "style: add custom font"
git push origin main

Using Custom Font Files

For custom font files (not from Google Fonts):

Place font files in public/fonts/
Use next/font/local:

app/layout.tsx

import localFont from 'next/font/local';

const customFont = localFont({
  src: [
    {
      path: '../public/fonts/custom-regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../public/fonts/custom-bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  variable: '--font-custom',
});