{"record":{"id":"1df9aade2ad0af49","repo":"oxc-project/oxc","slug":"rel-preconnect-is-missing-from-google-font","errorCode":null,"errorMessage":"`rel=\"preconnect\"` is missing from Google Font.","messagePattern":"`rel=\"preconnect\"` is missing from Google Font\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/nextjs/google_font_preconnect.rs","lineNumber":14,"sourceCode":"use oxc_ast::{AstKind, ast::JSXElementName};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::Span;\n\nuse crate::{\n    AstNode,\n    context::LintContext,\n    rule::Rule,\n    utils::{get_string_literal_prop_value, has_jsx_prop_ignore_case},\n};\n\nfn google_font_preconnect_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(r#\"`rel=\"preconnect\"` is missing from Google Font.\"#)\n        .with_help(\"See: https://nextjs.org/docs/messages/google-font-preconnect\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct GoogleFontPreconnect;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Enforces the presence of `rel=\"preconnect\"` when using Google Fonts via `<link>` tags.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// When using Google Fonts, it's recommended to include a preconnect resource hint to establish early connections to the required origin.\n    /// Without preconnect, the browser needs to perform DNS lookups, TCP handshakes, and TLS negotiations before it can download the font files,\n    /// which can delay font loading and impact performance.\n    ///","sourceCodeStart":1,"sourceCodeEnd":32,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/nextjs/google_font_preconnect.rs#L1-L32","documentation":"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.","triggerScenarios":"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\"`.","commonSituations":"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.","solutions":["Set `rel=\"preconnect\"` on the fonts.gstatic.com link.","Place the preconnect link as early as possible (top of `next/head` / document head) before the stylesheet link.","Prefer `next/font` so font loading optimization is handled for you."],"exampleFix":"// before\n<link href=\"https://fonts.gstatic.com\" />\n\n// after\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" />","handlingStrategy":"validation","validationCode":"npx oxlint --nextjs/google-font-preconnect src/","typeGuard":"const isPreconnectLink = (props: Record<string, unknown>) =>\n  String(props.rel ?? '') === 'preconnect';","tryCatchPattern":null,"preventionTips":["Whenever you link fonts.googleapis.com CSS, also add <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" /> (plus crossorigin for font files).","Remember preload is not a substitute for preconnect.","Use next/font to outsource font loading optimization entirely."],"tags":["nextjs","performance","fonts","resource-hints","lint"],"backgroundTag":"missing-preconnect-link","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}