{"record":{"id":"d32954d9f7e3e8d5","repo":"oxc-project/oxc","slug":"font-display-value-is-not-a-recommended-font-d","errorCode":null,"errorMessage":"`{font_display_value}` is not a recommended font-display value.","messagePattern":"`(.+?)` is not a recommended font-display value\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/nextjs/google_font_display.rs","lineNumber":22,"sourceCode":"use oxc_span::{GetSpan, Span};\n\nuse crate::{\n    AstNode,\n    context::LintContext,\n    rule::Rule,\n    utils::{find_url_query_value, get_string_literal_prop_value, has_jsx_prop_ignore_case},\n};\n\nfn font_display_parameter_missing(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\n        \"A font-display parameter is missing (adding `&display=optional` is recommended).\",\n    )\n    .with_help(\"See https://nextjs.org/docs/messages/google-font-display\")\n    .with_label(span)\n}\n\nfn not_recommended_font_display_value(span: Span, font_display_value: &str) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\"`{font_display_value}` is not a recommended font-display value.\"))\n        .with_help(\"See https://nextjs.org/docs/messages/google-font-display\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct GoogleFontDisplay;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Enforce font-display behavior with Google Fonts.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// Specifying display=optional minimizes the risk of invisible text or\n    /// layout shift. If swapping to the custom font after it has loaded is\n    /// important to you, then use `display=swap`` instead.\n    ///","sourceCodeStart":4,"sourceCodeEnd":40,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/nextjs/google_font_display.rs#L4-L40","documentation":"This is the `nextjs/google-font-display` rule in oxlint, second diagnostic (constructor `not_recommended_font_display_value` at crates/oxc_linter/src/rules/nextjs/google_font_display.rs:21). It fires when the `display` query parameter of a Google Fonts CSS URL is `auto`, `block`, or `fallback` (the exact match list in `run()`). These strategies allow text to be invisible or cause layout shift, unlike `optional` and `swap` which the rule accepts.","triggerScenarios":"A `<link>` with string-literal `href` starting `https://fonts.googleapis.com/css` whose `display` query value equals `auto`, `block`, or `fallback` — e.g. `href=\"...&display=block\"`. The diagnostic label points at the href prop span.","commonSituations":"Copying the embed snippet from Google Fonts with `display=auto` defaults; choosing `block` to guarantee the custom font renders (at the cost of invisible text); retrofitting `display=fallback` after hearing about FOIT without understanding the tradeoff.","solutions":["Change the value to `optional` (best for no layout shift) or `swap` (if the swap flash is acceptable).","Migrate to `next/font/google` with `display: 'optional'` | `'swap'` in the options object.","Remove the parameter only if you then intentionally accept the missing-display diagnostic — otherwise pick a passing value."],"exampleFix":"// before\n<link href=\"https://fonts.googleapis.com/css2?family=Inter&display=block\" rel=\"stylesheet\" />\n\n// after\n<link href=\"https://fonts.googleapis.com/css2?family=Inter&display=optional\" rel=\"stylesheet\" />","handlingStrategy":"validation","validationCode":"npx oxlint --nextjs/google-font-display src/","typeGuard":"const isRecommendedDisplay = (href: string) =>\n  /[?&]display=(optional|swap)(&|$)/.test(href);","tryCatchPattern":null,"preventionTips":["Never ship display=auto/block/fallback from the Google Fonts snippet defaults.","Decide once, per project, between optional (no shift) and swap (visible fallback), and standardize.","Move to next/font/google with an explicit display option when possible."],"tags":["nextjs","performance","fonts","core-web-vitals","lint"],"backgroundTag":"google-font-display","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"}