Customizations
The boilerplate uses Inter as the default fonts for both, headings and regular text.
- Go to the
layout.tsxfile in the/appfolder and change the following part to any other
// Part 1
import { Inter } from 'next/font/google';
// Part 2
const inter = Inter({
variable: '--font-inter',
subsets: ['latin'],
display: 'swap',
});
// Part 3
<html lang="en" className={`${inter.variable}`}>
to e.g.
// Part 1
import { Space_Mono } from 'next/font/google'
// Part 2
const SpaceMono = Space_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-body',
})
// Part 3
<html lang="en" className={`${SpaceMono.variable}`}>
Example taken from v0.dev public themes:
- Follow the above tutorial but import 2 fonts
// Part 1
import { Bricolage_Grotesque } from 'next/font/google'
import { Space_Mono } from 'next/font/google'
// Part 2
const fontHeading = Bricolage_Grotesque({
subsets: ['latin'],
display: 'swap',
variable: '--font-heading',
})
const fontBody = Space_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-body',
})
// Part 3
<html lang="en" className={`${fontHeading.variable,
fontBody.variable}`}>
- Go to
globals.cssin your/appfolder and add
@layer base {
body {
@apply font-body;
}
h1,
h2,
h3,
h4,
h5,
h6 {
@apply font-heading;
}
}
- Go to
tailwind.config.jsand add (not replace)
import { fontFamily } from 'tailwindcss/defaultTheme';
export default {
theme: {
extend: {
fontFamily: {
heading: ['var(--font-heading)', ...fontFamily.sans],
body: ['var(--font-body)', ...fontFamily.mono],
},
},
},
};