Web Font Optimization

9/26/2023

This post details techniques for optimizing web font loading and rendering to prevent layout shifts and reduce download times. It explains the use of `font-display` CSS properties (`block`, `swap`, `fallback`, `optional`, `auto`), the `size-adjust` font-face descriptor for matching fallback and web font metrics, and resource hints (`preconnect`, `preload`). It also highlights how the `next/font` module in Next.js automates these optimizations by downloading fonts at build time, serving them locally, and preloading them.

9/21/2023

This post highlights how L'Officiel Inc. leveraged Next.js's automatic webfont optimization as part of their migration to Vercel, contributing to a 60% increase in web traffic and improved SEO. The post specifically mentions that Next.js's built-in feature ensures custom fonts render fast at any weight by eliminating extraneous data fetches and ensuring timely rendering.

3/28/2023

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.