{"record":{"id":"eb7091a8f7c1f286","repo":"withastro/astro","slug":"fontfamilynotfound","errorCode":"FontFamilyNotFound","errorMessage":"No data was found for the `${family}` family passed to the `<Font>` component.","messagePattern":"No data was found for the `(.+?)` family passed to the `<Font>` component\\.","errorType":"exception","errorClass":"AstroError","httpStatus":null,"severity":"error","filePath":"packages/astro/components/Font.astro","lineNumber":16,"sourceCode":"---\nimport { componentDataByCssVariable } from 'virtual:astro:assets/fonts/internal';\nimport { filterPreloads } from '../dist/assets/fonts/core/filter-preloads.js';\nimport { AstroError, AstroErrorData } from '../dist/core/errors/index.js';\n\ninterface Props {\n\t/** The `cssVariable` registered in your Astro configuration. */\n\tcssVariable: import('astro:assets').CssVariable;\n\t/** Whether it should output [preload links](https://web.dev/learn/performance/optimize-web-fonts#preload) or not. */\n\tpreload?: import('astro:assets').FontPreloadFilter;\n}\n\nconst { cssVariable, preload = false } = Astro.props as Props;\nconst data = componentDataByCssVariable.get(cssVariable);\nif (!data) {\n\tthrow new AstroError({\n\t\t...AstroErrorData.FontFamilyNotFound,\n\t\tmessage: AstroErrorData.FontFamilyNotFound.message(cssVariable),\n\t});\n}\n\nconst filteredPreloadData = filterPreloads(data.preloads, preload);\n---\n\n<style set:html={data.css}></style>\n{\n\tfilteredPreloadData?.map(({ url, type }) => (\n\t\t<link rel=\"preload\" href={url} as=\"font\" type={`font/${type}`} crossorigin />\n\t))\n}\n","sourceCodeStart":1,"sourceCodeEnd":31,"githubUrl":"https://github.com/withastro/astro/blob/d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca/packages/astro/components/Font.astro#L1-L31","documentation":"AstroError with code `FontFamilyNotFound`, thrown by the `<Font>` component (`packages/astro/components/Font.astro`) when the `cssVariable` prop does not map to any registered font family. The component looks up the variable in `componentDataByCssVariable` (populated by the experimental fonts integration from config); a miss means no font data was registered for that variable, so it cannot emit `<link rel=preload>` or the CSS. The hint states this is usually a typo or an unregistered variable.","triggerScenarios":"Passing a `cssVariable` to `<Font>` that was not declared via the `experimental.fonts` config provider; passing a plain string instead of the `CssVariable` symbol/object returned by the config; a typo in the variable name; using `<Font>` before the fonts integration is enabled, or after renaming a variable without updating component usages.","commonSituations":"A developer enables experimental fonts, renames or removes a family, and forgets to update a `<Font cssVariable={...} />` usage; copy-pasting a `<Font>` call without importing the cssVariable from config; referencing a variable from a different config scope.","solutions":["Confirm the `cssVariable` prop is the exact object returned by your `experimental.fonts` config (e.g. `font Families`/provider's cssVariable), not a hand-written string.","Check for typos: the variable name in the component must match the one registered in config.","Ensure the experimental fonts integration/provider that defines the family is actually enabled in `astro.config.*`.","If the family was intentionally removed, delete the `<Font>` usage that references it."],"exampleFix":"---\n// before — passing a string typo instead of the registered variable\n<Font cssVariable=\"--myfont-haed\" />\n\n// after — use the cssVariable exported from config and correct the name\nimport { myHeading } from '../astro.config';\n<Font cssVariable={myHeading} preload />\n---","handlingStrategy":"validation","validationCode":"import { componentDataByCssVariable } from 'astro:assets';\n// before rendering\nfunction isRegisteredCssVariable(v: unknown): boolean {\n  return componentDataByCssVariable.has(v as any);\n}\nif (!isRegisteredCssVariable(cssVariable)) {\n  // skip rendering <Font> or log a config error instead of throwing at render time\n}","typeGuard":"import type { CssVariable } from 'astro:assets';\nfunction isCssVariable(v: unknown): v is CssVariable {\n  // CssVariable objects are produced by the fonts config; membership check is the real guard\n  return componentDataByCssVariable.has(v as CssVariable);\n}","tryCatchPattern":null,"preventionTips":["Always import the cssVariable from your astro config rather than writing the string by hand.","Keep a single source of truth for font variable names and import them everywhere.","Run `astro sync` / `astro check` after renaming or removing a font family to catch stale usages."],"tags":["astro-component","fonts","experimental","config-mismatch","typo"],"backgroundTag":null,"analyzedSha":"d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca","analyzedAt":"2026-08-12T13:37:29.035Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}