TechPrufer
Get started
Vercel
Vercel logoVercel · Feature trail

Web Font Optimization

3 posts · Mar 2023 – Sep 2023

What this trail covers

Vercel's platform provides comprehensive guidance and tooling for optimizing web font loading and rendering. This includes leveraging `font-display` CSS properties, `size-adjust` and other font-face descriptors for layout shift prevention, and resource hints like `preconnect` and `preload` to reduce download times. The `next/font` module automates these optimizations by downloading fonts at build time, serving them locally, and automatically preloading them. This ensures minimal layout shift and improved Core Web Vitals. The platform also supports custom fonts without compromising performance.

All Vercel trails
  1. Optimizing web fontsThis post details how to optimize web fonts using `font-display` CSS properties for controlling text rendering behavior during font loading, `size-adjust` and other font-face descriptors for ensuring consistency with fallback fonts, and resource hints (`preconnect`, `preload`) for reducing download times. It highlights the `next/font` module as an automated solution that downloads fonts at build time, serves them locally, calculates necessary font metrics for layout shift prevention, and preloads fonts for improved performance.
  2. Why Vercel and Next.js are the perfect fit for this global fashion media group | Customers | VercelThis 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. 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.