I am trying to use Google Fonts on a Nextjs project with the newest version 13 and I can't import Google Fonts (i.e. Poppins) correctly.
In the past I just added the link tags to the _document.js or _app.js file and that was it.
I am trying it this way without success:
<Head>
<link rel="preconnect" href="; />
<link rel="preconnect" href="; crossorigin />
<link href=":ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"></link>
</Head>
In the past, an alternative was to import the Google fonts on the global CSS stylesheet with @import but this method doesn't work either:
@import url(":300,400,700");
Please let me know how can I do it on Next version 13 and up
I am trying to use Google Fonts on a Nextjs project with the newest version 13 and I can't import Google Fonts (i.e. Poppins) correctly.
In the past I just added the link tags to the _document.js or _app.js file and that was it.
I am trying it this way without success:
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"></link>
</Head>
In the past, an alternative was to import the Google fonts on the global CSS stylesheet with @import but this method doesn't work either:
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,700");
Please let me know how can I do it on Next version 13 and up
Share Improve this question edited May 30, 2023 at 17:32 juliomalves 50.3k23 gold badges177 silver badges168 bronze badges asked May 30, 2023 at 8:32 victor.javictor.ja 8882 gold badges11 silver badges30 bronze badges3 Answers
Reset to default 13To use Google fonts on a Next 13+ project you can do it this way:
app/layout.js
import { Poppins } from 'next/font/google';
const poppins = Poppins({
subsets: ['latin'],
display: 'swap',
variable: '--font-poppins',
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
});
export const metadata = {
title: 'Page Title',
description: 'Page Description',
}
export default function RootLayout({ children }) {
return (
<html className={`${poppins.variable}`}>
<body>{children}</body>
</html>
)
}
And then in any CSS file you can use that font this way
.class {
font-family: var(--font-poppins);
}
Here is an official solution
Nextjs tutorial
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}This should be like this
import { Poppins } from 'next/font/google';
const poppins = Poppins({
subsets: ['latin'],
display: 'swap',
variable: '--font-poppins',
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
});
export const metadata = {
title: 'Page Title',
description: 'Page Description',
}
export default function RootLayout({ children }) {
return (
{/*use classNam not variable*/}
<html className={`${poppins.className}`}>
<body>{children}</body>
</html>
)
}
then in any css file use in class or in html tag like this
body{
font-family: "Poppins", sans-serif;
}