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

Next.js font optimization only for Google Font?

How to add Font optimization in Next.js?

Requirement for Next.js to add font optimization?

Demo

Full Demo on code sandbox

Head component with CDN

Add google font in next js by Rajdeep singh
Go to google font
Add google font in next js by Rajdeep singh
Search google font
Add Montserrat google font in next js by Rajdeep singh
Open the Montserrat google font web page.
Add Montserrat google font in next js by Rajdeep singh
Select Montserrat style on the google font website.
// 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.
Add Montserrat google font in next js by Rajdeep singh
Copy CSS rule style on the google font website.
h1,h2,h3 {

font-family: 'Montserrat', sans-serif;
/* rest css code also here */}

Download font locally and add it to Next.js

Adding Open Sans google font in next js by Rajdeep singh
Download Open Sans font locally.
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;}

Use Font in CSS

h1, h2,h3 {font-family: OpenSans, sans-serif;font-weight: 400;}

Add CSS on the entire website ( recommended by nextjs 10.2 and 10+ )

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:

Use the CSS import method.

Adding nunito google font in next.js By Rajdeep Singh
Open nunito google font web page.
Adding nunito google font in next.js By Rajdeep Singh
Click the @import tab on the google font web page
Adding nunito google font in next.js By Rajdeep Singh
Copy CSS code from the @import tab.
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
</style>
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} />
</>
);
}
Adding nunito google font in next.js help of @import CSS property By Rajdeep Singh
Use @import URL CSS property in next.js.
Adding nunito google font in next.js By Rajdeep Singh
Copy CSS rules families
Adding nunito google font in next.js help of @import CSS property By Rajdeep Singh
Paste previous copy CSS family code.

Note:

Demo

Full Demo on code sandbox

Conclusion

--

--

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

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