diff --git a/apps/v4/content/docs/registry/examples.mdx b/apps/v4/content/docs/registry/examples.mdx index b2d1b3de3d..66715513da 100644 --- a/apps/v4/content/docs/registry/examples.mdx +++ b/apps/v4/content/docs/registry/examples.mdx @@ -325,7 +325,8 @@ A `registry:font` item installs a Google Font. The `font` field is required and "provider": "google", "import": "Inter", "variable": "--font-sans", - "subsets": ["latin"] + "subsets": ["latin"], + "dependency": "@fontsource-variable/inter" } } ``` @@ -343,7 +344,8 @@ A `registry:font` item installs a Google Font. The `font` field is required and "import": "JetBrains_Mono", "variable": "--font-mono", "weight": ["400", "500", "600", "700"], - "subsets": ["latin"] + "subsets": ["latin"], + "dependency": "@fontsource-variable/jetbrains-mono" } } ``` @@ -360,7 +362,8 @@ A `registry:font` item installs a Google Font. The `font` field is required and "provider": "google", "import": "Lora", "variable": "--font-serif", - "subsets": ["latin"] + "subsets": ["latin"], + "dependency": "@fontsource-variable/lora" } } ``` @@ -380,7 +383,8 @@ Use the `selector` field to apply a font to specific CSS selectors instead of gl "import": "Playfair_Display", "variable": "--font-heading", "subsets": ["latin"], - "selector": "h1, h2, h3, h4, h5, h6" + "selector": "h1, h2, h3, h4, h5, h6", + "dependency": "@fontsource-variable/playfair-display" } } ``` diff --git a/apps/v4/content/docs/registry/registry-item-json.mdx b/apps/v4/content/docs/registry/registry-item-json.mdx index 4c52058202..e80c7c4824 100644 --- a/apps/v4/content/docs/registry/registry-item-json.mdx +++ b/apps/v4/content/docs/registry/registry-item-json.mdx @@ -339,6 +339,34 @@ Environment variables are added to the `.env.local` or `.env` file. Existing var +### font + +The `font` property is required for `registry:font` items. It configures the font family, provider, import name, CSS variable, and the npm package to install for non-Next.js projects. + +```json title="registry-item.json" showLineNumbers +{ + "font": { + "family": "'Inter Variable', sans-serif", + "provider": "google", + "import": "Inter", + "variable": "--font-sans", + "subsets": ["latin"], + "dependency": "@fontsource-variable/inter" + } +} +``` + +| Property | Type | Required | Description | +| ------------ | ---------- | -------- | ----------------------------------------------------------------------------------------- | +| `family` | `string` | Yes | The CSS font-family value. | +| `provider` | `string` | Yes | The font provider. Currently only `google` is supported. | +| `import` | `string` | Yes | The import name for the font from `next/font/google`. | +| `variable` | `string` | Yes | The CSS variable name for the font (e.g., `--font-sans`, `--font-mono`). | +| `weight` | `string[]` | No | Array of font weights to include. | +| `subsets` | `string[]` | No | Array of font subsets to include. | +| `selector` | `string` | No | CSS selector to apply the font to. Defaults to `html`. | +| `dependency` | `string` | No | The npm package to install for non-Next.js projects (e.g., `@fontsource-variable/inter`). | + ### docs Use `docs` to show custom documentation or message when installing your registry item via the CLI.