Skip to content
dev-docs

Google Font Preconnect

Source URL: https://nextjs.org/docs/messages/google-font-preconnect

Google Font Preconnect

Section titled “Google Font Preconnect”

Note: Next.js automatically adds <link rel="preconnect" /> after version 12.0.1.

Ensure preconnect is used with Google Fonts.

Why This Error Occurred

Section titled “Why This Error Occurred”

A preconnect resource hint was not used with a request to the Google Fonts domain. Adding preconnect is recommended to initiate an early connection to the origin.

Possible Ways to Fix It

Section titled “Possible Ways to Fix It”

Add rel="preconnect" to the Google Font domain <link> tag:

<link rel="preconnect" href="https://fonts.gstatic.com" />

Note: a separate link with dns-prefetch can be used as a fallback for browsers that don’t support preconnect although this is not required.

Section titled “Useful Links”