oxc-project/oxc · warning · OxcDiagnostic

`rel="preconnect"` is missing from Google Font.

Error message

`rel="preconnect"` is missing from Google Font.

What it means

This is the `nextjs/google-font-preconnect` rule in oxlint. It fires when a `<link>` whose `href` starts with `https://fonts.gstatic.com` lacks `rel="preconnect"` (rel missing, or a different literal like `preload`). Without the preconnect hint, the browser must resolve DNS, TCP, and TLS for the font origin only after the CSS is parsed, delaying font files and hurting load metrics.

Source

Thrown at crates/oxc_linter/src/rules/nextjs/google_font_preconnect.rs:14

use oxc_ast::{AstKind, ast::JSXElementName};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::Span;

use crate::{
    AstNode,
    context::LintContext,
    rule::Rule,
    utils::{get_string_literal_prop_value, has_jsx_prop_ignore_case},
};

fn google_font_preconnect_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(r#"`rel="preconnect"` is missing from Google Font."#)
        .with_help("See: https://nextjs.org/docs/messages/google-font-preconnect")
        .with_label(span)
}

#[derive(Debug, Default, Clone)]
pub struct GoogleFontPreconnect;

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Enforces the presence of `rel="preconnect"` when using Google Fonts via `<link>` tags.
    ///
    /// ### Why is this bad?
    ///
    /// When using Google Fonts, it's recommended to include a preconnect resource hint to establish early connections to the required origin.
    /// Without preconnect, the browser needs to perform DNS lookups, TCP handshakes, and TLS negotiations before it can download the font files,
    /// which can delay font loading and impact performance.
    ///

View on GitHub (pinned to e1e7af627c)

Solutions

1. Set `rel="preconnect"` on the fonts.gstatic.com link.
2. Place the preconnect link as early as possible (top of `next/head` / document head) before the stylesheet link.
3. Prefer `next/font` so font loading optimization is handled for you.

Example fix

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

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

npx oxlint --nextjs/google-font-preconnect src/

const isPreconnectLink = (props: Record<string, unknown>) =>
  String(props.rel ?? '') === 'preconnect';

When it happens

Trigger: A JSX `<link>` element with a string-literal `href` beginning with `https://fonts.gstatic.com` where the `rel` prop is absent or its literal value is anything other than exactly `preconnect` — e.g. `<link href="https://fonts.gstatic.com" />` or `rel="preload"`.

Common situations: Adding the Google Fonts stylesheet link but forgetting the companion preconnect hint recommended in Next.js docs; using `rel="preload"` thinking it is equivalent; copying partial snippets from tutorials; CI failing the nextjs plugin rules on a new font setup.

Related errors

• A font-display parameter is missing (adding `&display=option
• `{font_display_value}` is not a recommended font-display val
• Custom fonts not added in `pages/_document.js` will only loa
• Do not use `<a>` elements to navigate between Next.js pages.
• Using `<img>` could result in slower LCP and higher bandwidt

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/1df9aade2ad0af49. Report an issue: GitHub.