Objective
Implement multiple fonts in your React, NextJS application.
Completion time: 5-10 minutes.
Breakdown
NextJS
TailwindCSS
Next Google Fonts Package
Google Fonts
Let’s Get Started
New Application
Follow the installation docs from NextJS.
Make sure you select ‘yes’ when asked if you want to install TailwindCSS.
Existing application
Once you’re up and running with a new, or existing application we need to do the following:
Install the packages
Import Google Fonts into the application
Update the tailwind config file
Use the font on the frontend
Install the packages
Install the @next/font package that allows us to access all of the Google Fonts out there. Using your preferred package manager: npm, bun, pnpm
There are hundreds of Google Fonts available to choose from, each with their own properties to adjust them to your liking.
Import Google Fonts
Import the package into your layout.tsx or _app.tsx file
import {Cormorant, Nunito_Sans, Baskervville} from ‘next/font/google‘
// Create a font object, passing in properties.
// Note the ‘variable’ property, it’s needed inside tailwind.config
const fancyFont = Cormorant({
weight: ‘400‘,
subsets: [‘latin‘],
variable: ‘–font-fancy‘,
});
const readingFont = Nunito_Sans({
subsets: [‘latin‘],
variable: ‘–font-reading‘,
});
const alternative = Baskervville({
weight: ‘400‘,
subsets: [‘latin‘],
variable: ‘–font-alternative-syntax‘
});
// pass the font values into the wrapper class to
// make them available throughout the entire application
// this can also go in the html or body elements if necessary
export default function MyApp({ Component, pageProps }) {
return (
<main className={`
${fancyFont.variable}
${readingFont.variable}
${alternative.variable}`}>
<Component {…pageProps} />
</main>
)
}
Configure tailwind.config.ts
Extend the theme property to include our new fonts.
In this section, the left side fancy, “alternative-syntax” can be called anything you want.
The left side is what you’ll use in your Tailwind class to use the font
The contents of var() must match variable name defined in the _app.tsx or layout.tsx file where you initialised the NextFont object.
theme: {
extend: {
fontFamily: {
fancy: [“var(–font-fancy)“],
reading: [“var(–font-reading)“],
“alternative-syntax“: [“var(–font-alternative-syntax)“]
},
},
Use the font
Now that the font is installed, all that is left is to use it inside your react components by adding the class onto the HTML element.
<h1 className=“font-fancy”>I am the fancy font using Cormorant</h1>
<p className=“font-reading”>Reading font using Nunito Sans</p>
<p className=“font-alternative-syntax”>Baskerville font with alternative syntax.</p>
</div>
Result
Why Bother?
The simple act of adding a few different font stylings into your NextJS, React application can help elevate your websites design much more than you would expect.
As developers, we can sometimes focus too much on getting things to work (who doesn’t love that feeling), we add finesse through abstraction or complexity, and sometimes – we forget to make our frontend look as pretty as the code that’s behind it.
Hopefully now, you can add an additional layer of creativity into your designs.
