Custom fonts without compromise using Next.js and `next/font`

What this post added

This post introduces `next/font` as a streamlined solution for custom font optimization in Next.js. It details the complex manual workarounds previously used (self-hosting, preloading, subsetting, fallback fonts, client-side JS for new visits) and contrasts them with the simplified approach of `next/font`. Key benefits highlighted include automatic self-hosting, optimized character subsetting, and server-side calculation of `size-adjust` to prevent Cumulative Layout Shift (CLS) by generating a fallback font that matches the custom font's spacing. The post also covers configuration options like `display: 'swap'` and the use of the `variable` property for CSS integration, as well as its compatibility with the Next.js App Router.