About importing fonts in latest Next.js version
Answered
Chum salmon posted this in #help-forum
Chum salmonOP
I can't find a document explaining it. I just created a new Next.js project and found the following code in layout.tsx:
Before it used to be:
and
What is this new method?
If I want to use Inter font, do I modify as follows?
Do I have to also download Inter font and put it in the project somewhere?
Does anybody have a link to the doc where I can read more?
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
}); <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>Before it used to be:
const poppins = Poppins({
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
subsets: ['latin'],
display: 'swap',
});and
<body className={`${poppins.className}`}>What is this new method?
If I want to use Inter font, do I modify as follows?
const geistSans = localFont({
src: "./fonts/Inter.woff",
variable: "--font-inter",
weight: "100 900",
});Do I have to also download Inter font and put it in the project somewhere?
Does anybody have a link to the doc where I can read more?
Answered by B33fb0n3
Localfonts are just font, that are local ([read here](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts)).
For that, you also need a local file. So you can decide which way you want to use, both are fine
For that, you also need a local file. So you can decide which way you want to use, both are fine
3 Replies
@Chum salmon I can't find a document explaining it. I just created a new Next.js project and found the following code in layout.tsx:
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
Before it used to be:
const poppins = Poppins({
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
subsets: ['latin'],
display: 'swap',
});
and
<body className={`${poppins.className}`}>
What is this new method?
If I want to use Inter font, do I modify as follows?
const geistSans = localFont({
src: "./fonts/Inter.woff",
variable: "--font-inter",
weight: "100 900",
});
Do I have to also download Inter font and put it in the project somewhere?
Does anybody have a link to the doc where I can read more?
Localfonts are just font, that are local ([read here](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts)).
For that, you also need a local file. So you can decide which way you want to use, both are fine
For that, you also need a local file. So you can decide which way you want to use, both are fine
Answer
happy to help