{"record":{"id":"47b5001061815134","repo":"oxc-project/oxc","slug":"using-link-outside-of-head-will-disable","errorCode":null,"errorMessage":"Using `` outside of `` will disable automatic font optimization. This is discouraged.","messagePattern":"Using `` outside of `` will disable automatic font optimization\\. This is discouraged\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/nextjs/no_page_custom_font.rs","lineNumber":18,"sourceCode":"use oxc_ast::{\n AstKind,\n ast::{Class, Function, JSXAttributeItem, JSXAttributeValue, JSXElementName},\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::{GetSpan, Span};\n\nuse crate::{AstNode, context::LintContext, rule::Rule};\n\nfn not_added_in_document(span: Span) -> OxcDiagnostic {\n OxcDiagnostic::warn(\"Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged.\")\n .with_help(\"See: https://nextjs.org/docs/messages/no-page-custom-font\")\n .with_label(span)\n}\n\nfn link_outside_of_head(span: Span) -> OxcDiagnostic {\n OxcDiagnostic::warn(\"Using `` outside of `` will disable automatic font optimization. This is discouraged.\")\n .with_help(\"See: 'https://nextjs.org/docs/messages/no-page-custom-font\")\n .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoPageCustomFont;\n\ndeclare_oxc_lint!(\n /// ### What it does\n ///\n /// Prevent page-only custom fonts.\n ///\n /// ### Why is this bad?\n ///\n /// * The custom font you're adding was added to a page - this only adds the font to the specific page and not the entire application.\n /// * The custom font you're adding was added to a separate component within `pages/_document.js` - this disables automatic font optimization.\n ///\n /// ### Examples","sourceCodeStart":1,"sourceCodeEnd":36,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/nextjs/no_page_custom_font.rs#L1-L36","documentation":"Warning from oxlint rule `nextjs/no-page-custom-font` (diagnostic `link_outside_of_head`). Next.js can automatically preload and inline font stylesheets, but only when the font `` sits inside a `` from `next/head`. Rendered elsewhere in the tree, that optimization is disabled and the font becomes late or render-blocking.","triggerScenarios":"A Google Fonts `` whose ancestor chain does not include a `Head` component imported from `next/head` — e.g. placed directly in page JSX or a nested wrapper component — in a file that is not `pages/_document.js`.","commonSituations":"Wrapping font links in a custom `` that forgot the `Head`; moving markup around during refactors until the link escapes the Head tree.","solutions":["Wrap the `` in `` from `next/head` in the page that needs the font.","Or centralize the link in `pages/_document.js`, or replace it with `next/font` as the sibling diagnostic suggests."],"exampleFix":"// before\n
\n \n \n
\n\n// after\nimport Head from 'next/head';\n
\n \n \n \n \n
","handlingStrategy":"validation","validationCode":"// font links not wrapped in next/head:\n// rg -n -B2 'fonts\\.googleapis\\.com' -g '*.tsx' src | rg -v 'Head'","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Font links go inside `` from `next/head`, never bare in page JSX.","When extracting components, keep the `` and its `` wrapper together.","Run the nextjs oxlint rules on every PR so a refactor cannot silently unwrap Head."],"tags":["nextjs","fonts","next-head","lint"],"backgroundTag":"lint-font-loading","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}