How to Add Web Fonts to a Next.js Website

September 21, 2022 Abraham Smith

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

Learn how to embed 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 must use the @font-face CSS rule. This rule allows you to add custom fonts to a web page.

Before using font-face you need to download the fonts you want to use. There are many sites on the Internet that offer free fonts, including Google Fonts, Fontspace, and Dafont sites.

After downloading the web fonts, convert them to different font formats to support multiple browsers. To do this, you can use free online font conversion tools. Modern web browsers support the .woff and .woff2 formats. If you need to support older browsers, you should also provide .eot and .ttf formats.

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

The next step is to add the fonts to the styles/global.css File to make it available throughout the site. This example shows the fonts for the bold mermaid font:

@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;
}

After including the font files, you can use these fonts in a component-level CSS file:

h1 {
font-family: Mermaid;
}

Integrating webfonts into Next.js via a CDN

Some websites provide web fonts via a CDN that you can import into your app. This approach is easy to set up because you don’t need to download fonts or create fonts. In addition, if you use Google Fonts or TypeKit, Next.js will automatically take care of the optimization.

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

How to import fonts into a Next.js project using a link tag

The link tag always belongs in the head tag of an HTML document. To add a head tag in Next.js, you need to 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 paste the link to the font in the header 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 where you want to use the font.

For example, make the font available throughout the project by importing the web font into 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;
}

You can use the @import rule to import a font into a contained CSS file. Using the link tag makes the font accessible throughout the site.

Should you host fonts locally or import them via a CDN?

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

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

unugtp