shipfeedAI news, curated daily

00:37:42 CET
21 MAY00:37:42shipfeed
pull to refreshlast sync
Just in — 30 new
§ feed · storyline

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

Next.js's next/font module reduces cumulative layout shift, client-side JavaScript, and FOUC when loading custom fonts in Next.js 13 applications.

Mar 28 · · primary fetch1 sourceupdated Mar 28 ·

As web developers, we know the importance of typography in design. Custom fonts can set the tone for a website and enhance its overall aesthetic. However, using custom fonts can often create issues with website performance and user experience. One of the biggest issues with custom fonts is the that occurs when a font takes too long to load. These Flashes of Unstyled Content (FOUC) can alter the positioning of elements already on the page and make it difficult to navigate.

CLS and FOUC can also impact an application's search engine ranking.Cumulative Layout Shift (CLS) On Vercel’s external websites, we used to solve these problems with the workarounds that we’ll talk about below. However, with the release of Next.js 13, we switched to, which cut down on complex code, client-side JavaScript, and layout shift.next/font Read more

read full article on vercel.com
§ sources1 publication · timeline below
  1. vercel.comCustom fonts without compromise using Next.js and `next/font`primary