Next.js 13 + Google Fonts

Self-hosting Google Fonts is one of Next.js 13’s most recent developments. With this new functionality, everything takes place on the server side, thus the browser does not need to maintain an active connection in order to download web fonts from Google’s servers. We will go over installation and usage in this article.

Installation

To install Google Fonts optimization in an existing Next.js 13 project you should use yarn or npm

💿 INSTALL
yarn add @next/font
or
npm install @next/font

Usage

Importing web fonts into your CSS is unnecessary when using this font optimization package. All Google Fonts are easily accessible via @next/font/google (two-word font names are separated by _)

🚚 IMPORT
import { Inter, Cormorant_Garamond } from "@next/font/google"

After importing, you have to specify the weight for non-variable fonts

💡 Variable font = There is only one font file containing all the weight data, therefore different variations don't need to be specified explicitly

I encourage you to use a different file in your architecture for this purpose