Nextjs
How to Add Font in Next.js (12.0.1 Updated)
Full detailed article for Next.js to apply Google font in your web app. This article is part of my Next.js #SeriesPart7.
Since version 10.2, Next.js has provided a font Optimization feature for a web application. Next.js improves font optimization in the latest version and provides a disabled feature for font optimization.
Next.js font optimization only for Google Font?
You add font optimization for all fonts, including google font and other fonts that provide CDN.
How to add Font optimization in Next.js?
Font optimization, by default, is active in your Next.js app. You do not need any extra code for font optimization.
Requirement for Next.js to add font optimization?
Make sure your app has the latest version of Next.js. If you have an old version of the Next.js app, I recommend updating your Next.js.
Next.js 10.2 and 10+ versions also support font optimization.
Demo
There are two ways to add Google font in Next.js
- Next Head component with CDN
- Download font locally and add Next.js
- Use the CSS import method
Head component with CDN
The best way is to add Google font and another font provider with a CDN link. You need a Next.js head component that helps to add Google font in Next.js.
The first step you go to Google font.
Google font provides lots of fonts for you, and you choose the best font for the website. For example, I use Montserrat font for my Next.js app.
I search for the Montserrat font for my Next.js app and click the Montserrat font card to check all details.
Open the Montserrat webpage; you select font styles according to your requirements.
Scroll down on the selected family nav section and copy all links in the link tab.
Secondly, you import the Head component in Next.js. You paste previous copy links from the Google font website in the Next.js head component inside the head component.
Syntax Head component
// import head componentimport Head from 'next/head';export default function Home() {return (
<><Head>{/* paste here previous copy links form the google font website */}</Head>
{/* rest code here */}</>
);
}
Check code
In the fourth step, you copy CSS from the Google font website.
Firstly, add a link tag in a head component after copying CSS code and using it in your CSS file where you add font-family in the tag.
h1,h2,h3 {
font-family: 'Montserrat', sans-serif;/* rest css code also here */}
In this example, I am adding Montserrat font on HTML h1, h2, and h3 tags, and ‘sans-serif’ is a default font for the browser. If something is wrong, or Google CDN does not work, then sans-serif is applied.
Download font locally and add it to Next.js
Firstly, go to Google Fonts and other fonts to provide and download font files on your computer. For example, I’m downloading Open Sans font from Google Fonts.
I download the Open Sans font in the asset folder in the Next.js app. Next.js also provides a public folder, and you choose which folder you add a font in, a public folder or a custom folder.
The folder structure in Next.js:
Add CSS to a specific website page.
@font-face {font-family: 'OpenSans';src: url('../asset/OpenSans/OpenSans-Light.ttf');src: url('../asset/OpenSans/OpenSans-Medium.ttf');font-weight: 400;font-style: normal;}
Apply CSS in next.js with the local asset; use CSS font-face property to add CSS. Inside font-face CSS property, you pass folder path with exact extension. Now your font is ready to use inside your next js.
Use Font in CSS
h1, h2,h3 {font-family: OpenSans, sans-serif;font-weight: 400;}
To apply Font on HTML, you use the font-family CSS property to add a font in your next.js.
Add CSS on the entire website ( recommended by nextjs 10.2 and 10+ )
In the updated version of nextjs. You load or add a font in the next.js _document.js file. With _document.js file apply, add font on the entire website.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Anek+Malayalam:wght@200;300&family=Montserrat:wght@300;400&display=swap" rel="stylesheet" /></Head><body>
<Main />
<NextScript />
</body>
</Html>
)
}
Note:
Before using the CSS Font-faces property, check the CSS browser support compatibility. Then use it inside the Next.js app.
Use the CSS import method.
CSS provides in build @import property to add a font to your project, and you do not need to import the head component in Next.js. For this example, I use nuito font for the Next.js app.
Go to the Google font website, and I choose nunito font for the Next.js web app.
Firstly click on the @import button tab.
First, click the @import tab and then copy all the CSS code.
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
</style>Your copy CSS code looks like.
Follow the steps to apply font in Next.js:
- Suppose you apply this font to the entire website. You go to the Next.js custom app and paste your CSS code inside the head component in Next.js.
import "../styles/globals.css";
import Head from "next/head";export default function MyApp({ Component, pageProps }) {return (
<>
<Head>
{/* This ways to add css on global website use css @import property and you also paste Link tag also */}
<style>
@import
url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
</style>
</Head>
<Component {...pageProps} /></>
);
}
- Suppose you add a font on a specific page on the website. Then you follow this way.
Firstly import google font use CSS @import and URL property. Make sure your import property is declared on top of the CSS file.
You apply the @import code successfully on Next.js. Now again, copy code in CSS rules specifies families tab.
Whatever place you use font-family CSS property, you see a change for the font in the browser. You debag font with the developer tool.
Note:
Before using, CSS @import and URL property, make sure to check the CSS browser compatibility. Then use it inside the Next.js app.
Demo
References
Previous articles on the next js series
Conclusion
I recommend you use the Next.js head component method. Because the Next.js team also recommended it. I have also mentioned other ways in this article. But CSS browser compatibility is a significant issue.
Read More content at Nextjs. Sign up for a free newsletter and join the nextjs community on medium.
