Replace the Google Fonts `<link>` with `next/font`, preferably a self-hosted or package font, and apply the generated class from the layout. `next/font` handles loading and font-display behavior without a third-party head link, reducing layout shift and flashes of unstyled text. Verify CLS and font loading in the browser after the change.
Installs into .claude/skills of the current project.
Are you the author of Nextjs Optimization?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/hoangnguyen0403-nextjs-optimization-104f36fb)
Replace the Google Fonts `<link>` with `next/font`, preferably a self-hosted or package font, and apply the generated class from the layout. `next/font` handles loading and font-display behavior without a third-party head link, reducing layout shift and flashes of unstyled text. Verify CLS and font loading in the browser after the change.
