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
💿 INSTALLyarn add @next/fontornpm 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 _
)
🚚 IMPORTimport { 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