In the starter kit, I have already configured two fonts: Inter and Source Serif 4. To use those fonts, you can use the font-sans and font-serif class in TailwindCSS.
Customize
You can find the following piece of code in src/app/layout.tsx and tailwind.config.ts file:
layout.tsx
import { Inter, Source_Serif_4 } from'next/font/google';// other import statements// making an object of Inter font, and giving it variable '--font-sans'constfontSans=Inter({ subsets: ['latin'], variable:'--font-sans' });// making an object of Source Serif 4 font, and giving it variable '--font-serif'constfontSerif=Source_Serif_4({ subsets: ['latin'], style: ['italic','normal'], variable:'--font-serif',});// some code here <bodyclassName={cn('font-sans antialiased',// making font-sans defaultfontSans.variable,// with this, you can use font-sans anywherefontSerif.variable // with this, you can use font-serif anywhere )} >// other code
tailwind.config.ts
// other code fontFamily: { sans: ['var(--font-sans)',...fontFamily.sans], serif: ['var(--font-serif)',...fontFamily.serif], },
Now using the above reference, let's try to use another font. We'll try using Space Grotesk as font-mono.
We can very easily edit the above files as below:
layout.tsx
import { Inter, Source_Serif_4, Space_Grotesk } from'next/font/google';// other import statements// making an object of Inter font, and giving it variable '--font-sans'constfontSans=Inter({ subsets: ['latin'], variable:'--font-sans' });// making an object of Source Serif 4 font, and giving it variable '--font-serif'constfontSerif=Source_Serif_4({ subsets: ['latin'], style: ['italic','normal'], variable:'--font-serif',});//making an object of Space Grotesk font, and giving it variable '--font-mono'constfontMono=Space_Grotesk({ subsets: ['latin'], variable:'--font-mono',})// some code here <bodyclassName={cn('font-sans antialiased',// making font-sans defaultfontSans.variable,// with this, you can use font-sans anywherefontSerif.variable,// with this, you can use font-serif anywherefontMono.variable // with this, you can use font-mono anywhere )} >// other code