Web fonts are a great way to add custom fonts to your website. These fonts may not be available on a user’s system, so you need to include them in your project by hosting them or referencing them via a CDN.

Learn how to include web fonts in a Next.js website using these two methods.

Using Self-Hosted Fonts in Next.js

To add self-hosted fonts in Next.js, you need to use the @font-face CSS rule. This rule allows you to add custom fonts to a web page.

Before using font-face, you must download the fonts you want to use. There are many sites on the internet that offer free fonts, including the Google fonts, fontspace, and dafont websites.

Once you download the web fonts, convert them to different font formats to support multiple browsers. You can use free online font conversion tools to do so. Modern web browsers support .woff and .woff2 formats. If you need to support legacy browsers, you should also provide .eot and .ttf formats.

Create a new folder called fonts in your site directory and save your converted font files there.

The next step is to include the font faces in the styles/global.css file to make them available to the entire website. This example shows the font faces for the mermaid font in bold: 

        @font-face {
    font-family: 'Mermaid';
    src: url('Mermaid-Bold.eot');
    src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
        url('Mermaid-Bold.woff2') format('woff2'),
        url('Mermaid-Bold.woff') format('woff'),
        url('Mermaid-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

Once you’ve include the font files, you can use those fonts in a component-level CSS file: 

        h1 {
    font-family: Mermaid;
}

Including Web Fonts to Next.js via a CDN

Some websites serve web fonts via a CDN that you can import to your app. This approach is easy to set up because you don’t need to download fonts or create font faces. Additionally, if you use Google fonts or TypeKit, Next.js automatically handles optimization.

You can add fonts from a CDN using the link tag or the @import rule inside a CSS file.

The link tag always goes inside the head tag of an HTML document. To add a head tag in Next.js, you must create a custom document. This document modifies the head and body tag used to render each page.

Start using this custom document feature by creating the file /pages/_document.js.

Then, include the link to the font in the head of the _document.js file. 

        import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

How to Use the @import Rule to Include Fonts in a Next.js Project

Another option is to use the @import rule in the CSS file you want to use the font.

For example, make the font available across the entire project by importing the web font in the styles/global.css file. 

        @import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

You can now reference the font family in a CSS selector like this: 

        h1 {
    font-family:'Libre Caslon Display', serif;
}

The @import rule allows you to import a font in a contained CSS file. Using the link tag makes the font accessible across the whole site.

Should You Host Fonts Locally or Import Them via a CDN?

Fonts hosted locally are usually faster than fonts imported from a CDN. This is because the browser does not have to make an additional request to the font CDN once the web page has loaded.

If you want to use imported fonts, preload them to improve the site's performance. If the fonts are available on Google fonts or Typekit, you can import them and take advantage of Next.js' optimization features.