Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about getting next/font, local fonts, and Tailwind font variables working in Next.js, since it shows the setup step by step.
Recommended by 1 people across 1 different months, 2023 to 2024.
What it is
A short tutorial by Lee Robinson (leerob, then at Vercel) on the font optimization built into Next.js 13. It covers loading Google Fonts and local fonts with @next/font, self-hosting the font files, avoiding layout shift with an auto-generated fallback font, and wiring fonts into Tailwind CSS.
What people said
Recommends jonathangiardino · 2023-12 · Stack Overflow · on “NextJS 14 next/font/google fonts not working on Safari iOS”
You need to add: The fallback in the layout classname string className={`${inter.variable} font-sans ${serif.variable} font-serif ${mono.variable} font-mono The variables in the tailwind config file in the extended fontFamily property. fontFamily: { sans: ["var(--inter)"], serif: ["var(--instrument)"], mono: ["var(--roboto-mono)"], } This video by Lee from Vercel explains it, follow the video and it will work, I had the same issue! [this video]
Cites rottitime · 2023-01 · Stack Overflow · on “How to add custom local fonts to a Nextjs 13 Tailwind project?”
Full credit goes to Lee Robinson [this video] and official v13 doc [LINK] for my post. The below will also help you with the new v13 /app directory. 1. Install next fonts npm install @next/font 2. Download your fonts In my case I downloaded the Poppins fonts and placed them in /public/fonts/ 3. Link to your fonts file As per docs you can edit your _app.js . Link to your local fonts assign a variable name assign the class name to a parent html tag In my case I am using the new app directory: /src/app/layout.tsx import localFont from '@next/font/local' const poppins = localFont({ src: [ { path: '../../public/fonts/Poppins-Regular.ttf', weight: '400' }, { path: '../../public/fonts/Poppins-Bold.ttf',
Cites Juan Sebastian Millan Lejarde · 2023-06 · Stack Overflow · on “Cannot find next/google/font module in Typescript”
To solve this problem, you will need to ensure that your Next.js version is above 13.2.0. Prior to this version, you will need to install the @next/font package, as explained in the Next.js YouTube video in the docs: [this video] You can find more information about the version changes and the new feature added in the following link: [LINK]
Cites Beast80K · 2024-06 · Stack Overflow · on “How to use multiple fonts in NextJS”
Problem : Can't apply multiple fonts in NextJS Possible Cause : Inter font passed in body There's a solution by which you can pass font name in className without need of importing it (2nd approach given below). Solution : 1. In your approach : layout.ts : Don't pass inter font to body, 1 [LINK] <html lang="en" className={inter.className}> page.tsx : import { heebo } from './fonts'; export default function Home() { return ( <> <h1 className={`text-center ${heebo.className}`}>Heebo</h1> <h2 className={`text-center`}>Inter</h2> </> ); } 2. Using Tailwind CSS Variables to pass fonts : 1st approach is hectic because you have to import font multiple times throughout the project. To use multiple fo