With far less code, next/font reliably incorporates all the optimizations mentioned above for either third-party or first-party fonts. */ rules to manually subset the font before we used `next/font`.Īs you can imagine, we’d need to adjust and lengthen the code for any new fonts we wished to add. * Plus eight more definitions for other languages and characters. Here’s the relevant code from the return statement of our old next/head, which was rendered on every page:

We used client-side JavaScript to detect if a user has visited Vercel's site before, and if not, we served them the fallback font for a zero layout-shift experience.Īs you might guess, these optimizations took some complex workarounds in the codebase.We set the font-display CSS property to optional so that the text on the page wouldn’t flicker and cause layout shift if it loaded late.This included fonts that weren’t technically “web safe,” but were still available on many users’ devices. We specified fallback fonts that looked as similar as possible to our desired font.This is enough for English, and other subsets could still load in as needed. We only preloaded the Latin subset of characters.We hosted our font ourselves, instead of using a third-party URL like Google Fonts.This Next.js 13 template, with `next/font` ready to go in `pages/index.js`, can give you a jumpstart on conquering layout shift.Īt and, we were optimizing our font loading in a few key ways:

Segoe ui font family href