How to Add Custom Local Fonts in Next.js ?

Next.js is a full-stack React-based framework, unlike a traditional react app where the entire application is loaded and rendered on the client, Next.js allows the first-page load to be rendered by the server which is great for SEO & Performance. 

Some of the key features of Next.js are: 

• Image Optimization
• Easy Page Routing
• Out of the box Typescript support.
• Easy deployment
• Static Site Generation

You can learn more about Next here. In this article, we will learn to add Custom Fonts to our Next.js project.

Step 1: Create a new next project using the command below. (Make sure you have npm and node installed)

npx create-next-app myproject

Step 2: Open the project in your code editor, and create a new folder in the root directory called fonts.

Step 3: If you already have the fonts, then skip this step. Download the required fonts from Google Fonts.

For this article, we are downloading Rubik font from google fonts. 

Step 4: Now move all the fonts to the /fonts directory, so that we can add a relative path in our CSS to access these fonts.

Project Structure:

Step 5: Add CSS to create a custom font family for these fonts. We’ll add this CSS in global styles so that the whole application can access these fonts, but you can also add fonts for a specific web page. 

/styles/global.css

@font-face {
  font-family: "Rubik";
  src: url('../fonts/rubik/Rubik-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url('../fonts/rubik/Rubik-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url('../fonts/rubik/Rubik-Italic.ttf');
  font-weight: normal;
  font-style: italic;
}

We can also add multiple font weights and font styles for the same font family as shown above.

Step 6: Let’s test this font in our ./pages/index.js file (Home page). We’ll remove all the boilerplate code for simplicity and add its styles to ./styles/Home.module.css .

./pages/index.js

import styles from '../styles/Home.module.css'

export default function Home() {
 return (
   <h1 className={styles.testFont}>Hello Geeks</h1>
  )
}

./styles/Home.module.css

.testFont {
  font-family: 'Rubik' , sans-serif;
  font-weight: bold;
  color: green;
  font-size: 3rem;
}

Output: