Add Font
Learn how to add custom fonts to your application
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:
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:
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 mainUsing Custom Font Files
For custom font files (not from Google Fonts):
- Place font files in
public/fonts/ - Use
next/font/local:
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',
});Common Issues
Font Not Loading
- Check font import path is correct
- Verify font variable is added to
<html>className - Ensure Tailwind config includes the font family
Font Looks Different
- Check font weights are imported correctly
- Verify fallback fonts in Tailwind config
Next Steps
- Change Colors - Customize color scheme
- Customize Emails - Brand your emails
Related Documentation
- Next.js Font Optimization - Font optimization guide
- Google Fonts - Browse available fonts
How is this guide ?
Last updated on