Add Fonts to Next.js Projects - Font Integration Guide
- Published on
- Jigar Patel--4 min read
Overview
- Introduction
- Google fonts
- Local Fonts
- TailwindCSS
- Quick summary
- About the Author
- We're Hiring
- Related Blogs
Introduction
Next.js, a remarkable React-based library, offers an array of built-in features that streamline the initiation of your React applications. Among these features is the recently introduced next/font package, designed to simplify the integration of fonts into your Next.js applications with speed and ease.
Google fonts
A notable advantage of Next.js's new font package is its seamless integration with Google Fonts. This exceptional feature empowers you to effortlessly access Google's extensive font library whenever needed. Notably, fonts are downloaded during the build phase, eliminating the need for client-side requests to Google. Furthermore, only the imported fonts are loaded, ensuring optimal efficiency.
To achieve this, import fonts from next/font/google. Font names adopt Snake_Case, making it easy to identify and import fonts. For instance:
import { Inter, Lexend, Source_Sans_Pro } from 'next/font/google';
This import yields a method that returns an object encompassing parameters necessary for font integration. For example:
export const titleFont = Rubik({
subsets: ['latin'],
weight: 'variable',
});
export const bodyFont = Inter({
subsets: ['latin'],
weight: ['400', '500', '600', '700'],
});
These objects contain properties for incorporating fonts using class names and style props, allowing for seamless integration:
export default function Fonts() {
return (
<div className="flex h-screen w-full flex-col items-center justify-center gap-4 bg-stone-900 text-white">
<h1 className={clsx('font-text text-8xl', titleFont.className)}>Hi, I'm Omari</h1>
<button className="rounded bg-teal-800 px-8 py-4 text-2xl shadow" style={bodyFont.style}>
Let's Talk
</button>
</div>
);
}
Local Fonts
Next.js also offers a method for loading local fonts, enriched by the font optimization provided by the package. Usage closely resembles that of Google fonts, albeit with the inclusion of a local font path:
import localFont from 'next/font/local';
export const localInter = localFont({ src: '../../inter/Inter-Regular.ttf' });
The src can also be an array, facilitating the creation of font families through multiple files:
export const localInter = localFont({
src: [
{
path: '../../inter/Inter-Regular.ttf',
weight: '400',
style: 'normal',
},
{
path: '../../inter/Inter-Light.ttf',
weight: '300',
style: 'normal',
},
{
path: '../../inter/Inter-Italic.ttf',
weight: '400',
style: 'italic',
},
],
});
TailwindCSS
Integrating Next.js's font package into a Tailwind setup is straightforward and yields substantial benefits.
Firstly, add a CSS variable to the font configuration:
export const titleFont = Rubik({
subsets: ['latin'],
weight: 'variable',
variable: '--font-title',
});
This exposes a "variable" property on the font object, which can be incorporated using the className prop:
export default function Fonts() {
return (
<div
className={clsx(
titleFont.variable,
bodyFont.variable,
'flex h-screen w-full flex-col items-center justify-center gap-4 bg-stone-900 text-white'
)}
>
<h1 className={clsx('font-text text-8xl', titleFont.className)}>Hi, I'm Omari</h1>
<button className="rounded bg-teal-800 px-8 py-4 text-2xl shadow" style={bodyFont.style}>
Let's Talk
</button>
</div>
);
}
This setup introduces new font classes within the Tailwind configuration.
Quick summary
Thank you for reading! I trust this article has guided you in incorporating fonts into your Next.js projects, whether via Google fonts or local files. Should you require further assistance or wish to share your thoughts, please feel free to leave a comment below. Your feedback is invaluable!
About the Author
Jigar Patel is a enthusiast and a software developer at JBCodeapp Company. Visit our JBCodeapp to learn more about our work in the Laravel ecosystem.
We're Hiring
Are you passionate about Laravel development? We're always on the lookout for talented developers to join our team. Check out our careers page for current job openings.