### Install Fontless Components

Source: https://github.com/herber/fontless/blob/master/packages/components/README.md

Install the library using npm or yarn.

```bash
npm install @varld/fontless-components

# yarn
yarn add @varld/fontless-components
```

--------------------------------

### Install Fontless Hooks

Source: https://github.com/herber/fontless/blob/master/packages/hooks/README.md

Installation commands for npm and yarn package managers.

```bash
npm install @varld/fontless-hooks

# yarn
yarn add @varld/fontless-hooks
```

--------------------------------

### Fetch Font with Custom Display Property

Source: https://context7.com/herber/fontless/llms.txt

Customize the font-display behavior by using the 'display' parameter. This example sets it to 'optional'.

```bash
curl "https://your-fontless-instance.vercel.app/api/css?family=Roboto&display=optional"
```

--------------------------------

### Fontless Configuration File Example

Source: https://context7.com/herber/fontless/llms.txt

This JSON file defines the fonts to be included in a Fontless Service deployment. It specifies font details like category, name, and ID.

```json
{
  "version": "v1",
  "name": "My Fontless Instance",
  "type": "varld-fontless-config",
  "fonts": {
    "roboto": {
      "category": "sans-serif",
      "name": "Roboto",
      "id": "roboto",
      "previewVariant": "regular"
    },
    "open-sans": {
      "category": "sans-serif",
      "name": "Open Sans",
      "id": "open-sans",
      "previewVariant": "regular"
    },
    "lato": {
      "category": "sans-serif",
      "name": "Lato",
      "id": "lato",
      "previewVariant": "regular"
    }
  }
}
```

--------------------------------

### Fetch Specific Roboto Font Weights

Source: https://context7.com/herber/fontless/llms.txt

Request specific font weights for Roboto by including the 'wght' parameter. This example fetches weights 400 and 700.

```bash
curl "https://your-fontless-instance.vercel.app/api/css?family=Roboto:wght@400;700"
```

--------------------------------

### Fetch Multiple Font Families

Source: https://context7.com/herber/fontless/llms.txt

Combine requests for multiple font families in a single API call by repeating the 'family' parameter. This example fetches Roboto and Open Sans with specified weights.

```bash
curl "https://your-fontless-instance.vercel.app/api/css?family=Roboto:wght@400&family=Open+Sans:wght@400;600"
```

--------------------------------

### Embed Multiple Fonts with Fontless

Source: https://context7.com/herber/fontless/llms.txt

Include multiple font families with various weights and styles by listing them in the 'family' parameter. This example includes Roboto and Open Sans.

```html
<link href="https://your-fontless-instance.vercel.app/api/css?family=Roboto:ital,wght@0,400;0,700;1,400&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
```

--------------------------------

### GET /api/css

Source: https://context7.com/herber/fontless/llms.txt

Retrieves CSS @font-face declarations for requested font families, weights, and styles, compatible with the Google Fonts CSS2 API.

```APIDOC
## GET /api/css

### Description
Serves CSS font-face declarations compatible with the Google Fonts CSS2 API. It accepts font family parameters with optional weight and style specifications.

### Method
GET

### Endpoint
/api/css

### Parameters
#### Query Parameters
- **family** (string) - Required - The font family name, optionally including weight and style (e.g., Roboto:wght@400;700 or Roboto:ital,wght@0,400;1,400).
- **display** (string) - Optional - The font-display property. Supported values: auto, block, swap, fallback, optional.

### Response
#### Success Response (200)
- **Content-Type** (text/css) - Returns CSS @font-face declarations.

#### Error Response (406)
- **code** (string) - Error identifier (e.g., "missing_family", "invalid_font_display").
- **message** (string) - Human-readable error description.
```

--------------------------------

### Create Fontless Service ZIP Archive

Source: https://context7.com/herber/fontless/llms.txt

Creates a downloadable ZIP archive of the Fontless Service files and configuration for manual deployment. This is useful for hosting providers that support Next.js. The archive includes service files, configuration, and instructions for installation.

```typescript
import { zipRepo } from './lib/zipRepo';
import { download } from './lib/download';
import { createFontServiceConfig } from './lib/createFontServiceConfig';
import { getRepoContents } from './lib/getRepoContents';

// Fetch service files from GitHub
const serviceFiles = getRepoContents({
  org: 'varld',
  repo: 'fontless',
  path: 'service'
});

// Create configuration
const config = createFontServiceConfig(allFonts, ['roboto', 'lato'], 'Custom Fonts');

// Generate ZIP file as Uint8Array
const zipContent = await zipRepo(serviceFiles, JSON.stringify(config));

// Trigger browser download
download('fontless-service.zip', 'application/zip', zipContent);

// The ZIP contains:
// - All Fontless Service source files
// - fontless.config.json with selected fonts
// - Ready to deploy with: yarn install && yarn build
```

--------------------------------

### Migrate Link Tag from Google Fonts to Fontless

Source: https://context7.com/herber/fontless/llms.txt

Replace the Google Fonts URL with your Fontless instance URL in the 'href' attribute of the link tag to migrate. This example shows the migration for Roboto with specific weights and display swap.

```html
<!-- Before (Google Fonts): -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<!-- After (Fontless): -->
<link href="https://your-fontless-instance.vercel.app/api/css?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
```

--------------------------------

### Get Window Dimensions with useSize Hook

Source: https://context7.com/herber/fontless/llms.txt

The useSize hook provides the current browser window's width and height, updating on resize. It returns Infinity for SSR to prevent hydration mismatches.

```typescript
import { useSize } from '@varld/fontless-hooks';

function ResponsiveLayout() {
  const { width, height } = useSize();

  const isMobile = width < 768;
  const isTablet = width >= 768 && width < 1024;
  const isDesktop = width >= 1024;

  return (
    <div>
      <p>Window: {width}px × {height}px</p>
      {isMobile && <MobileMenu />}
      {isTablet && <TabletMenu />}
      {isDesktop && <DesktopMenu />}
    </div>
  );
}

function FontGrid() {
  const { width } = useSize();
  // Calculate columns based on window width
  const columns = Math.max(1, Math.floor(width / 250));

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${columns}, 1fr)`,
      gap: '20px'
    }}>
      {fonts.map(font => <FontCard key={font.id} font={font} />)}
    </div>
  );
}
```

--------------------------------

### Track Scroll Position with useScroll Hook

Source: https://context7.com/herber/fontless/llms.txt

Use the useScroll hook to get the window's horizontal and vertical scroll positions. It updates automatically and is safe for server-side rendering.

```typescript
import { useScroll } from '@varld/fontless-hooks';

function ScrollIndicator() {
  const { x, y } = useScroll();

  return (
    <div style={{ position: 'fixed', top: 10, right: 10 }}>
      <p>Horizontal scroll: {x}px</p>
      <p>Vertical scroll: {y}px</p>
      {y > 100 && <button onClick={() => window.scrollTo(0, 0)}>Back to top</button>}
    </div>
  );
}

function StickyNav() {
  const { y } = useScroll();
  const isSticky = y > 60;

  return (
    <nav style={{
      position: isSticky ? 'fixed' : 'relative',
      top: 0,
      background: isSticky ? 'white' : 'transparent',
      boxShadow: isSticky ? '0 2px 10px rgba(0,0,0,0.1)' : 'none'
    }}>
      <h1>Fontless</h1>
    </nav>
  );
}
```

--------------------------------

### createDeployment

Source: https://context7.com/herber/fontless/llms.txt

Deploys a Fontless Service instance to Vercel.

```APIDOC
## createDeployment

### Description
Deploys a Fontless Service instance directly to Vercel using their deployment API. This function packages the service files along with the generated configuration and creates a production deployment.

### Parameters
- **vercelToken** (string) - Required - Vercel API authentication token.
- **projectName** (string) - Required - Name of the project to deploy.
- **config** (Object) - Required - The Fontless configuration object.
- **serviceFiles** (Array) - Required - The source files for the service.

### Response
- **deployment** (Object) - Returns the Vercel deployment response containing id, url, and readyState.
```

--------------------------------

### Create Fontless Service Configuration

Source: https://context7.com/herber/fontless/llms.txt

Generates a Fontless configuration object from available fonts and selected IDs. Use this to prepare configuration before deployment or download. Supports custom instance names or a default name.

```typescript
import { createFontServiceConfig } from './lib/createFontServiceConfig';

interface Font {
  category: string;
  name: string;
  id: string;
  previewVariant: string;
}

// Example: All available fonts from the API
const allFonts: Font[] = [
  { id: 'roboto', name: 'Roboto', category: 'sans-serif', previewVariant: 'regular' },
  { id: 'open-sans', name: 'Open Sans', category: 'sans-serif', previewVariant: 'regular' },
  { id: 'lato', name: 'Lato', category: 'sans-serif', previewVariant: 'regular' },
  { id: 'montserrat', name: 'Montserrat', category: 'sans-serif', previewVariant: 'regular' }
];

// User-selected font IDs
const selectedFonts = ['roboto', 'open-sans'];

// Generate configuration with custom instance name
const config = createFontServiceConfig(allFonts, selectedFonts, 'My Company Fonts');
// Returns:
// {
//   version: 'v1',
//   name: 'My Company Fonts',
//   type: 'varld-fontless-config',
//   fonts: {
//     'roboto': { id: 'roboto', name: 'Roboto', category: 'sans-serif', previewVariant: 'regular' },
//     'open-sans': { id: 'open-sans', name: 'Open Sans', category: 'sans-serif', previewVariant: 'regular' }
//   }
// }

// Generate configuration with default name
const defaultConfig = createFontServiceConfig(allFonts, selectedFonts);
```

--------------------------------

### Extract Query Parameters with useQuery

Source: https://github.com/herber/fontless/blob/master/packages/hooks/README.md

A wrapper around the Next.js router to extract specific query parameters.

```javascript
import { useQuery } from '@varld/fontless-hooks';

// replace `key` with the parameter you want to get
let value = useQuery('key');
```

--------------------------------

### createFontServiceConfig

Source: https://context7.com/herber/fontless/llms.txt

Generates a Fontless configuration object based on available fonts and user selections.

```APIDOC
## createFontServiceConfig

### Description
Creates a Fontless configuration object from a list of available fonts and selected font IDs. This function is used internally by Fontless Setup to generate the configuration before deployment or download.

### Parameters
- **allFonts** (Array<Font>) - Required - List of available font objects.
- **selectedFonts** (Array<string>) - Required - List of font IDs to include in the config.
- **name** (string) - Optional - Custom name for the font service instance.

### Response
- **config** (Object) - Returns a configuration object containing version, name, type, and the map of selected fonts.
```

--------------------------------

### Usage of Fontless Button Component

Source: https://github.com/herber/fontless/blob/master/packages/components/README.md

Import and use the Button component from the library. Ensure the component is imported before use.

```javascript
import { Button } from '@varld/fontless-components';

<Button display="primary">Click me</Button>;
```

--------------------------------

### Deploy Fontless Service to Vercel

Source: https://context7.com/herber/fontless/llms.txt

Deploys a Fontless Service instance directly to Vercel using their deployment API. This function packages service files and configuration for a production deployment. Requires a Vercel API token.

```typescript
import { createDeployment } from './lib/createDeployment';
import { createFontServiceConfig } from './lib/createFontServiceConfig';
import { getRepoContents } from './lib/getRepoContents';

// Fetch the latest Fontless Service source code from GitHub
const serviceFiles = await getRepoContents({
  org: 'varld',
  repo: 'fontless',
  path: 'service'
});

// Create the configuration
const config = createFontServiceConfig(allFonts, ['roboto', 'open-sans'], 'My Fonts');

// Deploy to Vercel (requires Vercel API token)
const vercelToken = 'your-vercel-api-token';
const projectName = 'my-fontless-instance';

const deployment = await createDeployment(vercelToken, projectName, config, serviceFiles);
// Returns Vercel deployment response:
// {
//   id: 'dpl_xxxxx',
//   url: 'my-fontless-instance-xxxxx.vercel.app',
//   readyState: 'QUEUED',
//   ...
// }

console.log(`Deployed to: https://${deployment.url}`);
```

--------------------------------

### Create and Manage a Modal Dialog

Source: https://context7.com/herber/fontless/llms.txt

Use the Modal component for confirmation dialogs or forms. It supports keyboard dismissal and responsive design. Ensure to manage the modal's open state with `useState`.

```tsx
import { Modal, Button } from '@varld/fontless-components';
import { useState } from 'react';

function DeployConfirmation() {
  const [isOpen, setIsOpen] = useState(false);

  const modalButtons = [
    {
      display: 'secondary',
      children: 'Cancel',
      onClick: () => setIsOpen(false)
    },
    {
      display: 'primary',
      children: 'Deploy Now',
      onClick: async () => {
        await deployToVercel();
        setIsOpen(false);
      }
    }
  ];

  return (
    <>
      <Button display="primary" onClick={() => setIsOpen(true)}>
        Deploy
      </Button>

      <Modal
        open={isOpen}
        onClose={() => setIsOpen(false)}
        title="Confirm Deployment"
        buttons={modalButtons}
      >
        <p>You are about to deploy a Fontless instance with 5 selected fonts.</p>
        <p>This will create a new Vercel deployment.</p>
        <ul>
          <li>Roboto (sans-serif)</li>
          <li>Open Sans (sans-serif)</li>
          <li>Lato (sans-serif)</li>
          <li>Playfair Display (serif)</li>
          <li>Fira Code (monospace)</li>
        </ul>
      </Modal>
    </>
  );
}

```

--------------------------------

### Track Window Size with useSize

Source: https://github.com/herber/fontless/blob/master/packages/hooks/README.md

Retrieves the current browser window dimensions, updating automatically on resize events.

```javascript
import { useSize } from '@varld/fontless-hooks';

let { height, width } = useSize(');
```

--------------------------------

### Fetch Roboto Font CSS

Source: https://context7.com/herber/fontless/llms.txt

Use this curl command to fetch the CSS for the Roboto font with default variants. Ensure you replace 'your-fontless-instance.vercel.app' with your actual Fontless instance URL.

```bash
curl "https://your-fontless-instance.vercel.app/api/css?family=Roboto"
```

--------------------------------

### Fetch Italic and Normal Roboto Variants

Source: https://context7.com/herber/fontless/llms.txt

This command fetches both italic and normal variants for specified weights of the Roboto font. The 'ital' parameter specifies italic (1) or normal (0).

```bash
curl "https://your-fontless-instance.vercel.app/api/css?family=Roboto:ital,wght@0,400;1,400;0,700;1,700"
```

--------------------------------

### zipRepo

Source: https://context7.com/herber/fontless/llms.txt

Creates a ZIP archive for manual deployment.

```APIDOC
## zipRepo

### Description
Creates a downloadable ZIP archive containing the Fontless Service files and configuration for manual deployment.

### Parameters
- **serviceFiles** (Array) - Required - The source files for the service.
- **configJson** (string) - Required - The stringified Fontless configuration.

### Response
- **zipContent** (Uint8Array) - Returns the generated ZIP file content.
```

--------------------------------

### Display a Loading Spinner

Source: https://context7.com/herber/fontless/llms.txt

Use the `Loading` component to indicate ongoing asynchronous operations. It supports a `size` prop for different visual scales.

```tsx
import { Loading } from '@varld/fontless-components';
import { useState, useEffect } from 'react';

function FontList() {
  const [fonts, setFonts] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchFonts().then(data => {
      setFonts(data);
      setLoading(false);
    });
  }, []);

  if (loading) {
    return <Loading />;  // Default size spinner
  }

  return (
    <div>
      {fonts.map(font => <FontCard key={font.id} font={font} />)}
    </div>
  );
}

```

```tsx
function InlineLoadingExample() {
  const [deploying, setDeploying] = useState(false);

  return (
    <Button display="primary" onClick={() => setDeploying(true)}>
      {deploying ? <Loading size="small" /> : 'Deploy'}
    </Button>
  );
}

```

--------------------------------

### useQuery Hook

Source: https://context7.com/herber/fontless/llms.txt

React hook for extracting URL query parameters.

```APIDOC
## useQuery Hook

### Description
A React hook that extracts query parameters from the URL, wrapping Next.js router functionality with fallback support for client-side URL parsing.

### Parameters
- **key** (string) - Required - The query parameter key to retrieve.

### Response
- **value** (string | undefined) - Returns the value of the query parameter or undefined if not found.
```

--------------------------------

### Use useQuery Hook for URL Parameters

Source: https://context7.com/herber/fontless/llms.txt

A React hook that extracts query parameters from the URL. It wraps Next.js router functionality and provides fallback support for client-side URL parsing. Useful for accessing dynamic parameters like 'font' or 'weight'.

```typescript
import { useQuery } from '@varld/fontless-hooks';

function FontPreview() {
  // Extract 'font' query parameter from URL
  // URL: /preview?font=roboto&weight=700
  const fontFamily = useQuery('font');    // Returns: 'roboto'
  const fontWeight = useQuery('weight');  // Returns: '700'
  const missing = useQuery('notexist');   // Returns: undefined

  return (
    <div style={{ fontFamily, fontWeight: Number(fontWeight) || 400 }}>
      {fontFamily ? `Preview of ${fontFamily}` : 'No font selected'}
    </div>
  );
}
```

--------------------------------

### Error Response for Missing Family Parameter

Source: https://context7.com/herber/fontless/llms.txt

An HTTP 406 error is returned if the 'family' parameter is missing from the API request.

```bash
curl "https://your-fontless-instance.vercel.app/api/css"
```

--------------------------------

### Error Response for Invalid Display Parameter

Source: https://context7.com/herber/fontless/llms.txt

An HTTP 406 error is returned if an invalid value is provided for the 'display' parameter.

```bash
curl "https://your-fontless-instance.vercel.app/api/css?family=Roboto&display=invalid"
```

--------------------------------

### Define Font Data Structure (TypeScript)

Source: https://context7.com/herber/fontless/llms.txt

TypeScript interfaces for `FontVariant` and `FontData` define the expected structure for font metadata and variant information used within the system.

```typescript
// Font variant with paths to font files
interface FontVariant {
  id: string;              // e.g., '400', '700italic'
  local: string[];         // Local font names for src fallback
  fontFamily: string;      // e.g., 'Roboto'
  fontStyle: string;       // 'normal' | 'italic'
  fontWeight: string;      // '100' - '900'
  woff: string;            // Path to WOFF file
  woff2: string;           // Path to WOFF2 file
  ttf: string;             // Path to TTF file
  svg: string;             // Path to SVG file
  eot: string;             // Path to EOT file
}

// Complete font data with all variants
interface FontData {
  id: string;              // URL-safe identifier
  family: string;          // Display name
  category: string;        // 'serif' | 'sans-serif' | 'display' | 'handwriting' | 'monospace'
  variants: FontVariant[];
  subsets: string[];       // Available character subsets
  lastModified: string;    // ISO date string
  subsetMap: {
    cyrillic: boolean;
    'cyrillic-ext': boolean;
    greek: boolean;
    'greek-ext': boolean;
    latin: boolean;
    'latin-ext': boolean;
    vietnamese: boolean;
  };
}

// Example font data structure (from fonts.json)
const exampleFontData: FontData = {
  id: 'roboto',
  family: 'Roboto',
  category: 'sans-serif',
  lastModified: '2022-04-12',
  subsets: ['latin', 'latin-ext', 'cyrillic'],
  subsetMap: {
    latin: true,
    'latin-ext': true,
    cyrillic: true,
    'cyrillic-ext': false,
    greek: false,
    'greek-ext': false,
    vietnamese: false
  },
  variants: [
    {
      id: '400',
      local: ['Roboto', 'Roboto-Regular'],
      fontFamily: 'Roboto',
      fontStyle: 'normal',
      fontWeight: '400',
      woff: '/fonts/roboto/normal-400.woff',
      woff2: '/fonts/roboto/normal-400.woff2',
      ttf: '/fonts/roboto/normal-400.ttf',
      svg: '/fonts/roboto/normal-400.svg',
      eot: '/fonts/roboto/normal-400.eot'
    }
  ]
};

```

--------------------------------

### Labeled Input Component

Source: https://context7.com/herber/fontless/llms.txt

The Input component provides a labeled text input field with hover and focus states. It accepts all standard HTML input attributes and can be used with refs for form handling.

```tsx
import { Input } from '@varld/fontless-components';
import { useState, useRef } from 'react';

function FontSearchForm() {
  const [searchTerm, setSearchTerm] = useState('');
  const [instanceName, setInstanceName] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <form>
      {/* Basic input with label */}
      <Input
        label="Instance Name"
        value={instanceName}
        onChange={(e) => setInstanceName(e.target.value)}
        placeholder="My Fontless Instance"
      />

      {/* Search input with ref */}
      <Input
        ref={inputRef}
        label="Search Fonts"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Type to search..."
        autoFocus
      />

      {/* Input without label */}
      <Input
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Filter fonts..."
        name="filter"
      />
    </form>
  );
}
```

--------------------------------

### Styled Button Component Variants

Source: https://context7.com/herber/fontless/llms.txt

Use the Button component for various actions with predefined display styles: primary, secondary, warning, and danger. It supports standard button props and is built with styled-components.

```tsx
import { Button } from '@varld/fontless-components';

function FontActions() {
  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      {/* Primary action button */}
      <Button display="primary" onClick={() => deployFonts()}>
        Deploy to Vercel
      </Button>

      {/* Secondary/outlined button */}
      <Button display="secondary" onClick={() => downloadZip()}>
        Download ZIP
      </Button>

      {/* Warning button */}
      <Button display="waning" onClick={() => resetSelection()}>
        Reset Selection
      </Button>

      {/* Danger button */}
      <Button display="danger" onClick={() => deleteInstance()}>
        Delete Instance
      </Button>

      {/* Default black button */}
      <Button onClick={() => console.log('clicked')}> 
        Default Style
      </Button>
    </div>
  );
}
```

--------------------------------

### Apply Fontless Fonts in CSS

Source: https://context7.com/herber/fontless/llms.txt

Use the 'font-family' CSS property to apply the embedded fonts. Specify fallback fonts like 'sans-serif' for robustness.

```css
<style>
  body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
  }

  h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
  }
</style>
```

--------------------------------

### Track Scroll Position with useScroll

Source: https://github.com/herber/fontless/blob/master/packages/hooks/README.md

Retrieves the current horizontal and vertical scroll values, updating automatically on scroll events.

```javascript
import { useScroll } from '@varld/fontless-hooks';

let { x, y } = useScroll(');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.