Next.js Tutorial: How to Use Fonts

Next.js Tutorials | By |

Fonts play a significant role in web design. They affect readability and the overall aesthetic of your site. With Next.js, integrating fonts is easy and powerful. This tutorial shows you how to use fonts in your Next.js project effectively.

Why Fonts Matter in Web Design

Before diving in, let’s understand the value of using the right fonts:

  • Fonts shape your brand identity.
  • They guide user attention.
  • Good typography improves user experience.

In a Next.js project, you have several options to manage fonts. You can self-host them, import from Google Fonts, or use the built-in next/font feature.

Let’s explore each method step by step.

Option 1: Using next/font for Optimized Google Fonts

Since Next.js 13, font optimization has been baked into the framework. With the next/font/google module, you can load fonts directly from Google.

Step 1: Install the Required Version

Ensure your project uses Next.js 13.2 or later.

If not, update with:

npm install next@latest react@latest react-dom@latest

Step 2: Import the Font

You can import fonts from Google like this:

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

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

This code loads two font weights (normal and bold) from Google.

Step 3: Apply the Font to Your App

Use the font’s className in your layout or component:

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  );
}

This approach improves performance. Fonts are self-hosted and optimized during the build.

Option 2: Custom Fonts (Self-hosted)

Want full control? Hosting fonts yourself is another solid option. This is great if:

  • You want to avoid third-party services.
  • You have a custom brand font.

Step 1: Create a Fonts Folder

Add a /public/fonts folder in your project. Then, place your .woff, .woff2, or .ttf files inside.

Step 2: Define Fonts in CSS

In your global stylesheet (e.g., globals.css), define a @font-face rule:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2'),
       url('/fonts/MyCustomFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

Now you can use MyCustomFont anywhere in your styles.

Step 3: Apply to Components

You can now use the font with:

<div style={{ fontFamily: 'MyCustomFont' }}>
  Welcome to my website!
</div>

Or use a class in your CSS files.

body {
  font-family: 'MyCustomFont', sans-serif;
}

Next.js fully supports .ttf (TrueType Font) files.

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Important Notes

  • .ttf files work fine, but .woff2 is more optimized for web (smaller and faster).
  • Use .ttf only if you must, or convert it to .woff2 for best performance.
  • Font files in the public/ directory are automatically served by Next.js.

Option 3: Import Fonts via <link> Tags

This is the old-school approach, but it remains a useful one. It’s not used in App Router.

Step 1: Add Font Link to _document.js

In pages/_document.js, add a <link> tag inside the <Head> section:

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Step 2: Use the Font in CSS

Add this to globals.css:

body {
  font-family: 'Open Sans', sans-serif;
}

That’s it! This method is quick, but it’s less optimized than next/font.

Best Practices for Fonts in Next.js

To get the best SEO and performance results, follow these tips:

1. Use Only the Font Weights You Need

Loading extra weights slows down your site. Choose the exact ones you’ll use.

2. Use display=swap for Better Rendering

If using Google Fonts, the display=swap option helps prevent layout shifts. It shows fallback fonts until the main one loads.

3. Use System Fonts for Fast Loads

If performance is critical, consider system fonts like Arial, Helvetica, or sans-serif. They’re already on the user’s device.

4. Optimize Custom Fonts

Compress your custom font files using .woff2 formats. They’re smaller and load faster.

How Fonts Impact SEO

Fonts themselves don’t directly impact SEO rankings. But they affect key factors like:

  • Page speed: Large font files can hurt load time.
  • User experience: Readable fonts reduce bounce rates.
  • Core Web Vitals: Cumulative layout shifts (CLS) are affected by unoptimized fonts.

So, use fonts wisely to ensure a fast and readable site.

Use CSS Variables for Font Stacks

Want to simplify your typography system? Use CSS variables.

Example:

:root {
  --font-primary: 'Open Sans', sans-serif;
}

body {
  font-family: var(--font-primary);
}

This makes switching fonts easier later.

Finally

Fonts are more than just decoration. In a Next.js app, loading and managing fonts correctly helps your design and performance. Whether you use next/font, self-hosted files, or Google Fonts, follow the proper practices.

This article was originally published on Medium.

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *