Next.js v13 introduced a font system called to help abstract the complexity of optimizing fonts. This lesson covers how to use this font system to add custom and Google fonts in a Next.js project as well as to optimize the font loading experience. The system is one of many powerful features introduced in next.js 13.

15m read timeFrom blog.logrocket.com
Post cover image
Table of contents
Adding fonts in Next.jsOver 200k developers use LogRocket to create better digital experiencesHow the @next/font system helps with font optimization in Next.jsAdding Google Fonts with @next/fontAdding custom fonts in Next.jsAdding fonts to Next.js with Tailwind CSSAn issue with display: optional in the Chrome browserConclusionLogRocket : Full visibility into production Next.js apps

Sort: