{"record":{"id":"06b53b41aa9cbe29","repo":"oxc-project/oxc","slug":"custom-fonts-not-added-in-pages-document-js-wil","errorCode":null,"errorMessage":"Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged.","messagePattern":"Custom fonts not added in `pages/_document\\.js` will only load for a single page\\. This is discouraged\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/nextjs/no_page_custom_font.rs","lineNumber":12,"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 ///","sourceCodeStart":1,"sourceCodeEnd":30,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/nextjs/no_page_custom_font.rs#L1-L30","documentation":"Warning from oxlint rule `nextjs/no-page-custom-font` (diagnostic `not_added_in_document`). Google-Font `` tags placed in a page component instead of `pages/_document.js` only load for that one route, so the font flashes or misses entirely on navigation. The rule detects Google Fonts stylesheet links outside the custom document.","triggerScenarios":"A `` rendered in any file other than `pages/_document.js`.","commonSituations":"Pasting the `` that Google Fonts gives you into a page's JSX instead of `_document.js`; per-landing-page custom fonts.","solutions":["Move the font link into `pages/_document.js`'s `` so it loads app-wide.","Prefer `next/font/google` (`import { Inter } from 'next/font/google'`), which self-hosts and preloads the font with no link tag at all."],"exampleFix":"// before (pages/index.js)\n\n\n// after (pages/_document.js, inside )\n","handlingStrategy":"validation","validationCode":"// Google Fonts link tags outside _document.js:\n// rg -n 'fonts\\.googleapis\\.com' pages components app -g '!**/_document.*'","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Prefer `next/font/google` over any ``; it self-hosts, preloads, and removes the rule entirely.","If you keep link tags, they belong in `pages/_document.js`'s `` only.","Codemod rule of thumb: any fonts.googleapis.com href outside _document.js is a bug."],"tags":["nextjs","fonts","performance","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-14T05:17:10.506Z"}