Font optimization with next/font in NextJS - Mini Project: Build & Apply

Font optimization with next/font

📖 Scenario: You are building a simple Next.js website that needs to use a custom Google font efficiently.

🎯 Goal: Learn how to import and use a Google font with the next/font package to optimize font loading and improve performance.

📋 What You'll Learn

Import a Google font using next/font/google

Configure the font with specific weights and subsets

Apply the font style to a React component

Use the font's className in the component's root element

💡 Why This Matters

🌍 Real World

Optimizing fonts in Next.js apps improves page load speed and user experience by loading only needed font styles.

💼 Career

Knowing how to use next/font for font optimization is important for frontend developers working with Next.js to build fast, accessible websites.

1

Import the Roboto font from next/font/google

Write an import statement to import Roboto from next/font/google.

NextJS

# Your code here

Need a hint?

Use import { Roboto } from 'next/font/google' to import the font.

2

Configure the Roboto font with weights and subsets

Create a constant called roboto by calling Roboto with an object that sets weight to ["400", "700"] and subsets to ["latin"].

NextJS

import { Roboto } from 'next/font/google'

# Your code here

Need a hint?

Use Roboto({ weight: ["400", "700"], subsets: ["latin"] }) to configure the font.

3

Create a React component that uses the Roboto font

Write a functional React component called HomePage that returns a <main> element with the className set to roboto.className. Inside <main>, add an <h1> with the text Welcome to Next.js.

NextJS

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: ["400", "700"],
  subsets: ["latin"]
})

# Your code here

Need a hint?

Use className={roboto.className} on the <main> element to apply the font.

4

Export the HomePage component as default

Add export default HomePage at the end of the file to export the component.

NextJS

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: ["400", "700"],
  subsets: ["latin"]
})

function HomePage() {
  return (
    
      Welcome to Next.js
    
  )
}

# Your code here

Need a hint?

Use export default HomePage to export the component.