How to Use Next.js Custom Font: A Complete Guide for 2024

Integrating custom fonts in Next JS can greatly enhance your website’s design and user experience.

This blog covers everything you need to know about using Google Fonts and self-hosted fonts, optimizing font performance, and configuring advanced font loading strategies. Learn how to implement fonts using the next/font package, manage fallback fonts for seamless display, and minimize layout shifts for a polished, professional look.

Whether you’re building a brand-new site or refining an existing project, this complete guide will help you achieve high-performance typography in Next JS.

Why Use Custom Fonts?

Custom fonts play a crucial role in defining the visual identity of a website, contributing to its aesthetics and readability. Integrating custom fonts can help your project stand out, improve readability, and enhance user experience. While standard web fonts like Arial and Times New Roman serve a purpose, custom fonts allow for more creativity and control.

Next JS makes it easy to add custom fonts to your project, including Google Fonts or self-hosted local font files, to tailor the look and feel of your site exactly to your specifications. In addition, custom fonts give you access to various font weights and font styles to create a dynamic, engaging user interface.

By using Next Font, Next JS optimizes font loading, minimizing external network requests and ensuring that font files are preloaded effectively. This leads to zero layout shift and an optimized user experience by loading local fonts with font optimization best practices in place.

Setting Up Your Next JS Project for Custom Fonts

Installing Next JS and Creating a New Project

To begin, you'll need a Next JS project set up, as this will serve as the foundation for adding custom fonts. If you’re starting from scratch, you can create a new project with the following commands:

Copy
npx create-next-app@latest my-nextjs-font-project
cd my-nextjs-font-project

This command creates a new Next JS project called my-nextjs-font-project. Once the setup completes, navigate into the project folder using the cd command. Here, you’ll have the structure ready to start integrating custom fonts.

Adding Necessary Dependencies for Fonts

Next, it’s time to add dependencies for font support. In Next JS, the next/font module simplifies working with Google Fonts and local font files. Start by installing the necessary packages, especially if you’re planning to use Google Fonts or self-hosted font files. For Google Fonts, Next JS’s next/font/google package is included by default, so you don’t need additional installations. However, if you’re planning to use local fonts, make sure the font files are added to your project’s fonts directory for easy access.

Preparing the Fonts Directory

Organize font files by creating a fonts folder inside the public directory:

Add your font files (e.g., .woff2 or .ttf) to this fonts directory. This allows you to reference these font files using relative paths, which will come in handy when configuring next/font/local for local fonts.

Example of Adding Google Fonts Dependency

If you're using Google Fonts, the next/font module allows you to import Google Fonts easily, as shown in this snippet:

Example of Adding Local Font Files

For local font files, use next/font/local to configure font weight, font style, and CSS variables if needed:

This setup gives you complete control over font handling in your Next JS project, enabling efficient font optimization and zero layout shift when loading custom fonts. By properly setting up local fonts and Google Fonts, you are now ready to integrate these fonts into your project’s CSS and JS files for styling.

Choosing and Preparing Custom Fonts

Selecting Fonts from Google Fonts or Self-Hosting

When it comes to custom fonts, you have two main options: using Google Fonts or self-hosting local font files. Each option has its own advantages, and the right choice depends on your project’s needs.

1. Google Fonts: Google Fonts offers a vast selection of high-quality web fonts that are easy to integrate and optimized for the web. Using Next Font Google in Next JS allows you to import fonts directly without the need for external links, minimizing external network requests and enhancing performance. For instance, if you need a versatile font like Inter or Roboto, Google Fonts provides various font weights, font styles, and variable font options to suit your design.

2. Self-Hosting Local Fonts: If you prefer more control, you can opt for local fonts by self-hosting the font files. This approach is beneficial for branding purposes, unique font families, or custom fonts that aren’t available on Google Fonts. You’ll need to upload the font files (like .woff2 or .ttf) to your project’s public/fonts directory. Using next/font/local, you can add local font files with more flexibility, including the ability to set CSS variables for font styles and font weight.

By using multiple fonts or a single font family via these methods, you’re set up for a robust font system in Next JS.

Optimizing Font Files for Web Performance

Font optimization is essential for ensuring that custom fonts do not slow down your site. Here are several ways to optimize font performance in Next JS:

1. Choose the Right Font Format: For web use, WOFF2 is the preferred format due to its superior compression and faster load times compared to non-variable font formats like TTF. If your fonts are available in WOFF2, this should be your go-to option when preparing font files.

2. Use Variable Fonts When Available: Variable fonts allow you to incorporate a range of font weights and font styles within a single font file, which reduces the number of multiple files your site needs to load. This can lead to significant improvements in font optimization and help reduce layout shift as fewer resources are loaded.

3. Limit Font Weights and Styles: To avoid unnecessarily large font file sizes, limit the number of font weights and styles you include. Instead of loading every possible font weight (e.g., 100 to 900), select only those you’ll use frequently in your design. For instance, you might only need 400 for regular text and 700 for headings.

4. Set Fallback Fonts and Zero Layout Shift: Set up fallback fonts and use Next Font options to avoid layout shifts when loading fonts. Setting fallback font family options like Arial or Helvetica ensures that users see readable content while waiting for custom fonts to load.

5. Enable Preloading for Critical Fonts: If you have a key font used in the header or other high-priority areas, preload it to improve loading times. This can be done using next/head in your Next JS project:

By following these steps, you can efficiently add and optimize fonts for a seamless user experience with minimal performance impact. This preparation ensures that custom fonts enhance rather than hinder your site’s performance in Next JS.

Integrating Custom Fonts with Next JS

Adding Fonts via CSS with Global Styles

If you’re working with custom fonts in Next JS, using global styles in CSS is a straightforward method. This approach is particularly helpful when dealing with local fonts that aren’t hosted on Google Fonts. To begin, make sure your font files are in the public/fonts directory.

1. Link the Font in CSS: First, link the font files in a global CSS file (e.g., globals.css) by specifying the @font-face rule. This defines the font family, font weight, and font style.

2. Apply the Font Globally: In the same CSS file, you can set your custom font as the default font across your project or for specific elements. For instance, you could apply it to the body tag to set a consistent font across the entire app:

This setup leverages CSS variables to define a consistent font family across the project, which can be useful if you’re switching between multiple fonts.

Using the next/font Package for Better Performance

For a more optimized solution, Next JS offers the next/font package, which simplifies font loading while reducing layout shift and minimizing external network requests. The next/font package provides two main methods: next/font/google for Google Fonts and next/font/local for self-hosted local fonts.

1. Adding Google Fonts with next/font/google: Import Google Fonts directly in your JavaScript or TypeScript files using next/font/google. This approach automatically configures font optimization, eliminating the need for external links in the HTML document. The font file is optimized, with reduced load times and built-in font weight and font style configuration.

By setting the className with interFont.className, this code assigns the font family globally to any element it wraps.

2. Adding Local Fonts with next/font/local: If you’re using local fonts, the next/font/local method allows you to configure them with similar performance benefits. Place your font files in the public/fonts directory and import them with next/font/local. Here’s an example:

next/font/local also supports variable fonts, enabling you to use a single font file with multiple font weights and font styles, reducing the need for multiple files. By assigning the className to a container, you can ensure a consistent font family throughout.

Using next/font offers better performance and flexibility in font management, particularly by reducing layout shift and optimizing font load speed. This approach is ideal for developers who want a streamlined, efficient way to manage custom fonts in Next JS.

Advanced Font Configuration in Next JS

Customizing Font Loading Strategy

One of the advanced features Next JS offers is the ability to customize how fonts are loaded, giving you control over font optimization and performance. By tailoring the font loading strategy, you can reduce layout shift and improve user experience. Here are some strategies to optimize font loading:

1. Adjusting Font Display: The display property within @font-face in CSS or directly in next/font configurations controls how fonts load. Setting display: swap allows text to display with a fallback font while the custom font loads, minimizing any blank areas. This is especially helpful when dealing with web fonts.

2. Preloading Critical Fonts: For fonts that are used immediately (e.g., headers or main body text), preloading them can significantly enhance performance. In Next JS, use in the next/head component to prioritize specific font files, ensuring they load faster.

3. Leveraging Variable Fonts: If your custom font supports variable font technology, it’s best to use it, as it allows for multiple font weights and styles within a single file. This not only saves bandwidth but also reduces the number of font files the browser needs to load.

By loading a single variable font file, you can manage various styles (e.g., bold, italic) without needing multiple files.

4. Using Next Font Strategies: Next JS offers a built-in optimization that delays non-essential fonts until after the initial content is displayed. This reduces the potential for layout shift and prioritizes critical font files that are essential for first impressions. You can configure this through the next/font package.

Leveraging Fallback Fonts for Improved UX

Fallback fonts are essential for ensuring that text is readable while custom fonts are loading, creating a smoother user experience. A good font family stack typically includes a series of fallback fonts that match the style and spacing of the custom font as closely as possible.

1. Defining Fallback Fonts in CSS: In global CSS, add fallback options directly in the font-family declaration. For instance, if you’re using a sans-serif custom font, include Arial or Helvetica as backup options.

2. Configuring Fallback Fonts in Next Font: When using the next/font package, you can configure fallback fonts directly within the font import:

3. Matching Font Sizes for Consistency: Ensure the font size and line height of the fallback font closely match those of the custom font. This reduces visual shifting when the custom font loads and aligns the fallback font experience with the intended design.

Final Thoughts!

In this article, we explored the essentials of adding and optimizing a Next.js custom font for your project, covering both Google Fonts and self-hosted options. We discussed setting up your project, selecting and preparing fonts, using the next/font package for streamlined integration, and advanced configurations like font loading strategies and fallback fonts. By following these steps, you can enhance your website's visual appeal, improve performance, and ensure a consistent user experience. With this guide, implementing custom fonts in Next.js becomes a straightforward process that boosts both design and functionality.

mkdir public/fonts

// Import a Google Font in your Next JS project
import { Roboto } from 'next/font/google';

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'], // choose the required font weights
});

// Import a local font in your Next JS project
import localFont from 'next/font/local';

const myFont = localFont({
  src: '../public/fonts/MyCustomFont.woff2',
  weight: '400',
  style: 'normal',
  variable: '--font-myfont',
});

// Example of importing Google Fonts
import { Roboto } from 'next/font/google';

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'], // specify the font weights you need
});

// Example of importing a local font
import localFont from 'next/font/local';

const myCustomFont = localFont({
  src: '/fonts/MyCustomFont.woff2', // path to the local font file
  weight: '400',
  style: 'normal',
  variable: '--font-mycustom',
});

import Head from 'next/head';

export default function MyApp() {
  return (
    <Head>
      <link
        rel="preload"
        href="/fonts/MyCustomFont.woff2"
        as="font"
        type="font/woff2"
        crossOrigin="anonymous"
      />
    </Head>
  );
}

/* globals.css */
@font-face {
  font-family: "MyCustomFont";
  src: url("/fonts/MyCustomFont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "MyCustomFont";
  src: url("/fonts/MyCustomFont-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

/* globals.css */
body {
  font-family: "MyCustomFont", Arial, sans-serif;
}

// Importing Google Fonts with next/font
import { Inter } from 'next/font/google';

const interFont = Inter({
  subsets: ['latin'],
  weight: ['400', '700'], // Specify font weights needed
});

export default function App() {
  return (
    <main className={interFont.className}>
      <h1>Hello, Next JS with Google Fonts!</h1>
    </main>
  );
}

// Importing a local font using next/font
import localFont from 'next/font/local';

const myLocalFont = localFont({
  src: '../public/fonts/MyCustomFont.woff2',
  weight: '400',
  style: 'normal',
  variable: '--font-mycustom', // Optional CSS variable
});

export default function App() {
  return (
    <div className={myLocalFont.className}>
      <h1>Custom Local Font in Next JS</h1>
    </div>
  );
}

/* Using font display in CSS */
@font-face {
  font-family: "MyCustomFont";
  src: url("/fonts/MyCustomFont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* This ensures text is visible during font load */
}

import Head from 'next/head';

export default function MyApp() {
  return (
    <Head>
      <link
        rel="preload"
        href="/fonts/MyCustomFont.woff2"
        as="font"
        type="font/woff2"
        crossOrigin="anonymous"
      />
    </Head>
  );
}

import localFont from 'next/font/local';

const variableFont = localFont({
  src: '/fonts/VariableFont.woff2',
  variable: '--font-variable',
});

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

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

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'],
  fallback: ['Arial', 'sans-serif'], // Define fallback fonts here
});

export default function App() {
  return (
    <div className={roboto.className}>
      <h1>Using Fallback Fonts in Next JS</h1>
    </div>
  );
}