All posts
TutorialMay 26, 20203 min read

Adding Google Fonts to Your Next.js App

A good font makes all the difference in the world. A couple options for adding Google fonts to your Next.js project.

From the archive. This was written a while back and may not reflect my current thinking.

Overview

Typography can make your application come to life. Adding Google Fonts (or custom fonts) to your Next.js project takes a few simple steps. This tutorial is written with Next.js 9.4.

I wrote a short explanation of Web Fonts here that provides additional helpful details.

When possible, I opt to use hosted Google fonts, as they are quick to get going. However, the information here will allow you to self-host as well.

Create an empty Next.js project

Let's create a standard Next.js project and accept the default starter app.

yarn create next-app

Use a Link Tag (Option 1)

Here we'll use the Google Hosted with Link tag method.

Next.js has an advanced feature called a Custom Document that allows you to augment your overall HTML document. In this case, we are looking to simply add a link tag to download the Google font in the document head.

Create a new file at pages/_document.js and add the contents:

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=Lobster&display=swap" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

You'll notice that I added the Lobster font type because it's quite different from the default Next.js font and fallbacks: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

If you're on a Windows PC or Android, you'll likely see a different font here (I'm on MacOS)

Use an @import CSS Rule (Option 2)

Your second option is to use a CSS @import rule to reference the Google hosted font. You'll want to do this before any of your css classes reference the font.

You can add this to the <style jsx global> tag that comes with the default Next.js project, but I prefer the flexibility of adding my own CSS class.

To add a css class, you need to add a Custom App. Add a new page called _app.js in the root of your project (pages/_app.js).

import '../css/main.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Next, you'll create a new directory called css in the root of your project, and a file named main.css in that directory (css/main.css):

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

/* can now reference my font */
body {
  font-family: Lobster;
}

/* my custom css */

Hosting your fonts locally

If you purchased fonts, or prefer to host them locally, then you'll be responsible for writing the full @font-face CSS rule that defines attributes about your fonts.

In Next.js, you can add your fonts to the public directory. I recommend creating a fonts directory in public (public/fonts). You would then reference your fonts location in your @font-face like this:

/* assuming the fonts were stored in public/fonts */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), url(/fonts/roboto.woff2) format('woff2');
}

If hosting locally, you can read more about Web Fonts, and specifically about @font-face on MDN.