google-font-preconnect.mdx

title	Google Font Preconnect

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

Ensure preconnect is used with Google Fonts.

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

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.

Useful Links

• Preconnect to required origins
• Preconnect and dns-prefetch
• Next.js Font Optimization