Skip to content

Rule · Lint

Google Fonts loaded via <link> / @import

lint/google-fonts-linkwarnvoid lintupdated

Why it matters

A stylesheet from fonts.googleapis.com is render-blocking, costs two extra origins (DNS+TLS) before text can paint, can't be preloaded reliably and causes font-swap CLS. It also leaks visitor IPs to a third party.

How to fix it

Use next/font/google (self-hosted at build time, with metric-matched fallbacks) or self-host WOFF2 files with @font-face + font-display: swap.

Example

ts
import { Inter } from 'next/font/google'
export const inter = Inter({ subsets: ['latin'], display: 'swap', variable: '--font-sans' })

References

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.