How To Use Google Fonts In NextJS
Jan 23 2024
It is now easier than before to import Google fonts into NextJs applications. Let's see how to achieve this.
How To Use Google Fonts In Next
The next/font module automatically optimizes your fonts and removes external network requests for better performance. Font files is downloaded at build and no request is sent to Google by the browser.
To integrate a Google Font into your Nextjs application:
- Import a font from Google Fonts using the next/font module.
- Then create a font instance with specific subsets and weights.
- Lastly, add the class name derived from the font instance to the body of the HTML document. This suggests that the selected font styles will be applied to the entire body of the document.
For example:
import Nav from "@/components/nav";
import Menu from "@/components/menu";
import Footer from "@/components/footer";
import { Roboto } from "next/font/google";
const roboto = Roboto({subsets:['latin'], weight:['300', '700']});
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={roboto.className}>
<Nav></Nav>
<main className="container px-4 mx-auto">
<Menu></Menu>
{children}
</main>
<Footer></Footer>
</body>
</html>
);
}
With Tailwind CSS
It is also easy to create a utilty class of a google font with TailwindCSS. Here are steps to achive this:
- Create the font instance with custom CSS variable
- Add the custom CSS variable to your HTML document
- Lastly, in tailwind config file, extends the default font family with the custom CSS variable
import Nav from "@/components/nav";
import { Roboto } from "next/font/google";
import Menu from "@/components/menu";
import Footer from "@/components/footer";
const roboto = Roboto({
subsets: ["cyrillic"],
weight: "300",
variable: "--font-roboto",
});
export default function RootLayout({ children }) {
return (
<main className={`${roboto.variable} font-sans`}>
<Menu></Menu>
{children}
</main>
);
}
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-roboto)'],
},
},
},
plugins: [],
}
Now, you can use the font-sans
tailwind classes to apply the font to your text.
Conclusion
In conclusion, The next/font/google package allows you to downland your fonts in build and use them in your nextjs website without sending any request to the Google, enabling more performance and privacy.
Thank you for reading.