Nextjs
Published in

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.

How to add Font in Next.js By Rajdeep Singh
How to add Font in Next.js

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

Full Demo on code sandbox

There are two ways to add Google font in Next.js

  1. Next Head component with CDN
  2. Download font locally and add Next.js
  3. 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.

Add google font in next js by Rajdeep singh
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.

Add google font in next js by Rajdeep singh
Search google font

I search for the Montserrat font for my Next.js app and click the Montserrat font card to check all details.

Add Montserrat google font in next js by Rajdeep singh
Open the Montserrat google font web page.

Open the Montserrat webpage; you select font styles according to your requirements.

Add Montserrat google font in next js by Rajdeep singh
Select Montserrat style on the google font website.

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

Demo blog code.

In the fourth step, you copy CSS from the Google font website.

Add Montserrat google font in next js by Rajdeep singh
Copy CSS rule style on 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.

Adding Open Sans google font in next js by Rajdeep singh
Download Open Sans font locally.

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:

Fonts Folder structure in next.js
The folder structure in the 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.

Adding nunito google font in next.js By Rajdeep Singh
Open nunito google font web page.

Go to the Google font website, and I choose nunito font for the Next.js web app.

Adding nunito google font in next.js By Rajdeep Singh
Click the @import tab on the google font web page

Firstly click on the @import button tab.

Adding nunito google font in next.js By Rajdeep Singh
Copy CSS code from the @import 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.
Adding nunito google font in next.js help of @import CSS property By Rajdeep Singh
Use @import URL CSS property in next.js.

Firstly import google font use CSS @import and URL property. Make sure your import property is declared on top of the CSS file.

Adding nunito google font in next.js By Rajdeep Singh
Copy CSS rules families

You apply the @import code successfully on Next.js. Now again, copy code in CSS rules specifies families tab.

Adding nunito google font in next.js help of @import CSS property By Rajdeep Singh
Paste previous copy CSS family code.

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

Full Demo on code sandbox

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/