Web font loaded from a font CDN
Why it matters
A <link> or @import to Google Fonts/Typekit is render-blocking CSS from another origin, and the font files then come from a third origin: text paints late and swaps in (layout shift).
Fix
Load the font with next/font/google or next/font/local: self-hosted, preloaded, with a size-adjusted fallback.
Credit
From the Next.js team
next/font self-hosts font files at build time, so text does not wait on a font CDN request or shift when it swaps in.
References
- Font OptimizationNext.js
- Font ModuleNext.js
- Best practices for fontsweb.dev
- Eliminate render-blocking resourcesChrome for Developers