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

This post details the transition from complex manual workarounds for custom font optimization (self-hosting, preloading, subsetting, fallback fonts, client-side JS for visit detection, `font-display: optional`) to the streamlined approach offered by `next/font` in Next.js 13. It highlights how `next/font` automates self-hosting, character subsetting, and crucially, calculates `size-adjust` server-side to generate a matching fallback font, preventing layout shift with `display: 'swap'`. The post provides code examples of the old and new implementations, emphasizing the reduction in code complexity and client-side JavaScript.