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.