react-doctor/nextjs-no-font-link
`import { Inter } from "next/font/google"` — self-hosted, zero layout shift, no render-blocking requests
- Category: Next.js
- Severity: warn
- Source:
oxlint-plugin-react-doctor - Framework: nextjs
- Enabled when: framework=nextjs and capabilities=nextjs
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Fires on a <link> JSX element whose href literal matches fonts.googleapis.com. Other CDN font hosts (Adobe Fonts, Fontshare, Bunny Fonts) are NOT detected. Dynamic or templated hrefs are skipped.
Fix prompt
Use this once validation confirms the diagnostic is real.
Use next/font/google: import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); then apply inter.className on <body> (or inter.variable to expose a CSS variable). Self-hosts the font at build time, eliminating layout shift and the extra DNS round-trip. https://nextjs.org/docs/app/api-reference/components/font
Related rules
More Next.js rules from the rules reference:
react-doctor/nextjs-no-google-analytics-script: Replace manual GA script with the optimized component: import { GoogleAnalytics } from '@next/third-parties/google'react-doctor/nextjs-no-head-import: Use the Metadata API instead: `export const metadata = { title: '...' }` or `export async function generateMetadata()`react-doctor/nextjs-no-img-element: `import Image from 'next/image'` — provides automatic WebP/AVIF, lazy loading, and responsive srcsetreact-doctor/nextjs-no-native-script: `import Script from "next/script"` — use `strategy="afterInteractive"` for analytics or `"lazyOnload"` for widgetsreact-doctor/nextjs-no-polyfill-script: Next.js includes polyfills for fetch, Promise, Object.assign, Array.from, and 50+ others automatically