Overview
In this article, I'll show you how Nextjs 13 now allows us to optimize our fonts with the next/font package. There is no need to download the Google fonts locally and no need for CDN links.
Google Fonts
To use Google fonts in your Nextjs app, you should use the recommended next/fonts/google to load Google fonts.
For increased privacy and performance, next/font will automatically optimize your fonts (including custom fonts) and remove external network queries.
For this post, we are going to use the poppings fonts from Google.
Locate your Layout.tsx and add this code snippet, edit it to your use.
import { Poppins } from 'next/font/google';
const poppinsFont = Poppins({
weight: '700',
subsets: ['latin'],
variable: '--font-poppins',
});
Make sure you use the variable configuration prop, which you will use to generate a definition for a CSS --var for each font. This would ensure that we have the best performance and flexibility.
Local Font
With the same library next/font/local you can make use of local fonts stored locally on your repository, so no need to download any extra module.
Make sure that you correctly put in the path to the locally stored font, it's fine to host it in your public directory. Remember to use the variable configuration prop, which you will use to generate a definition for a CSS --var for each font.
Add this file to your layouts.tsx file
import localFont from 'next/font/local';
const studioPro = localFont({
src: [
{
path: '../../public/font/studio-pro-bold.ttf',
weight: '500',
style: 'normal',
},
{
path: '../../public/font/studio-pro-medium.ttf',
weight: '400',
style: 'normal',
},
],
variable: '--font-studio-pro',
});
Accessing The Font
To access the font through your app, you should pass the generated variables into the wrapper class in Layout.tsx. This would ensure that the variable you passed is accessible to any parent component.
Your Layout.tsx file should look like this
import { Poppins } from 'next/font/google';
import localFont from 'next/font/local';
import React from "react";
export default function RootLayout({ children }: {children: React.ReactNode }) {
const poppinsFont = Poppins({
weight: '700',
subsets: ['latin'],
variable: '--font-poppins',
});
const studioPro = localFont({
src: [
{
path: '../../public/font/studio-pro-bold.ttf',
weight: '600',
style: 'normal',
},
{
path: '../../public/font/studio-pro-medium.ttf',
weight: '400',
style: 'normal',
},
],
variable: '--font-studio-pro',
});
return (
<html lang='en'>
<head />
<body className={`${poppinsFont.variable} ${studioPro.variable}`}>
{children}
</body>
</html>
);
}
You should see something like this on your Chrome browser tools
Access the Font on your CSS files
Here's how to access the font in a simple css file, you can use this in your global.css file
html {
font-family: var(--font-poppins);
}
h1 {
font-family: var(--font-studio-pro);
}
Access the Font with Tailwind
We have made this font globally accessible, but we need a way to tell Tailwind that these fonts are now accessible.
How To use this font in Tailwind, add this to the extend object inside the theme in your tailwind.config.ts file.
export default {
theme: {
extend: {
fontFamily: {
"font-poppins": "var(--font-poppins)",
"studio-pro": "var(--font-studio-pro)",
}
}
}
Here's how to use the font in a component.
const SimpleComponent: React.FC = () => (
<p className="font-poppins">
This is with the Poppins Font
</p>
);
export default SimpleComponent;
Final Thoughts
Thanks for reading, We've seen how easy it is to add fonts to a Nextjs app, I'll recommend using this approach to add fonts in your Nextjs app as this is the optimized way recommended by the documentation. It's time to experiment!! Looking forward to the amazing websites you'll build with Nextjs.
Connect With to me
Linkedin : https://www.linkedin.com/in/mitchel-inaju/
Twitter: https://twitter.com/mitchelinaju