useGoogleFontPreconnect
Summary
Section titled Summary- Diagnostic Category:
lint/nursery/useGoogleFontPreconnect - This rule has a safe fix.
- The default severity of this rule is information.
- This rule belongs to the following domains:
- Sources:
- Same as
@next/google-font-preconnect
- Same as
Description
Section titled DescriptionEnsure the preconnect attribute is used when using Google Fonts.
When using Google Fonts, adding the rel="preconnect" attribute to the <link> tag
that points to https://fonts.gstatic.com is recommended to initiate an early
connection to the font’s origin. This improves page load performance by reducing latency.
Failing to use preconnect may result in slower font loading times, affecting user experience.
Note: Next.js automatically adds this preconnect link starting from version 12.0.1, but in cases
where it’s manually added, this rule ensures the preconnect attribute is properly used.
Examples
Section titled ExamplesInvalid
Section titled Invalid<link href="https://fonts.gstatic.com"/>code-block.jsx:1:1 lint/nursery/useGoogleFontPreconnect FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ The attribute rel=“preconnect” is missing from the Google Font.
> 1 │ <link href=“https://fonts.gstatic.com"/>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Not using preconnect can cause slower font loading and increase latency.
ℹ Safe fix: Add the rel=“preconnect” attribute.
1 │ <link·href=“https://fonts.gstatic.com”·rel=“preconnect”/>
│ +++++++++++++++++
<link rel="preload" href="https://fonts.gstatic.com"/>code-block.jsx:1:1 lint/nursery/useGoogleFontPreconnect ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ The attribute rel=“preconnect” is missing from the Google Font.
> 1 │ <link rel=“preload” href=“https://fonts.gstatic.com"/>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Not using preconnect can cause slower font loading and increase latency.
Valid
Section titled Valid<link rel="preconnect" href="https://fonts.gstatic.com"/><link href="/logo.svg" rel="icon" />How to configure
Section titled How to configure{ "linter": { "rules": { "nursery": { "useGoogleFontPreconnect": "error" } } }}