> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/kapishdima/fonttrio/llms.txt
> Use this file to discover all available pages before exploring further.

# Font Schema

> JSON schema for individual font configurations in the Fonttrio registry

## Overview

Individual font configurations define a single typeface with all necessary metadata for loading it from a font provider (typically Google Fonts). Each font includes provider information, variable names, weights, and character subsets.

## Schema Structure

### Root Fields

<ResponseField name="name" type="string" required>
  Unique identifier for the font, typically the font family name in lowercase with hyphens

  **Examples**: `"inter"`, `"roboto"`, `"source-code-pro"`
</ResponseField>

<ResponseField name="type" type="string" required>
  Registry type identifier. Always `"registry:font"` for individual fonts.
</ResponseField>

<ResponseField name="title" type="string" required>
  Human-readable font name, typically the proper font family name

  **Examples**: `"Inter"`, `"Roboto"`, `"Source Code Pro"`
</ResponseField>

<ResponseField name="description" type="string" required>
  Brief description of the font, typically including classification

  **Format**: `"{Title} — {Classification} font."`

  **Examples**:

  * `"Inter — Sans Serif font."`
  * `"Roboto — Sans Serif font."`
  * `"Playfair Display — Serif font."`
</ResponseField>

### Font Configuration

<ResponseField name="font" type="object" required>
  Complete font configuration for loading and usage

  <ResponseField name="family" type="string" required>
    The font family name as it should appear in CSS

    **Examples**: `"Inter"`, `"Roboto"`, `"Source Code Pro"`
  </ResponseField>

  <ResponseField name="provider" type="string" required>
    Font provider service

    **Value**: `"google"` (Google Fonts is the primary provider)
  </ResponseField>

  <ResponseField name="import" type="string" required>
    Import name for loading the font from the provider

    Typically matches the `family` field

    **Examples**: `"Inter"`, `"Roboto"`, `"Source_Code_Pro"`
  </ResponseField>

  <ResponseField name="variable" type="string" required>
    CSS custom property name for the font

    **Format**: `"--font-{name}"`

    **Examples**: `"--font-inter"`, `"--font-roboto"`, `"--font-source-code-pro"`
  </ResponseField>

  <ResponseField name="weight" type="string[]" required>
    Array of available font weights

    **Values**: Weight values from `"100"` to `"900"` in increments of 100

    **Example**: `["100", "200", "300", "400", "500", "600", "700", "800", "900"]`

    Not all fonts include all weights. Some fonts may only have:

    * `["400"]` — Single regular weight
    * `["400", "700"]` — Regular and bold
    * `["300", "400", "500", "600", "700"]` — Common range
  </ResponseField>

  <ResponseField name="subsets" type="string[]" required>
    Array of character subsets supported by the font

    **Common subsets**:

    * `"menu"` — Basic menu characters
    * `"latin"` — Latin alphabet
    * `"latin-ext"` — Extended Latin characters
    * `"cyrillic"` — Cyrillic alphabet
    * `"cyrillic-ext"` — Extended Cyrillic
    * `"greek"` — Greek alphabet
    * `"greek-ext"` — Extended Greek
    * `"vietnamese"` — Vietnamese characters
    * `"arabic"` — Arabic script
    * `"hebrew"` — Hebrew script
    * `"japanese"` — Japanese characters
    * `"korean"` — Korean characters
    * `"chinese-simplified"` — Simplified Chinese
    * `"chinese-traditional"` — Traditional Chinese
    * `"devanagari"` — Devanagari script
    * `"thai"` — Thai script
    * `"math"` — Mathematical symbols
    * `"symbols"` — Additional symbols
  </ResponseField>
</ResponseField>

## Complete Examples

### Inter Font

A popular sans-serif font with extensive language support:

```json theme={null}
{
  "name": "inter",
  "type": "registry:font",
  "title": "Inter",
  "description": "Inter — Sans Serif font.",
  "font": {
    "family": "Inter",
    "provider": "google",
    "import": "Inter",
    "variable": "--font-inter",
    "weight": [
      "100",
      "200",
      "300",
      "400",
      "500",
      "600",
      "700",
      "800",
      "900"
    ],
    "subsets": [
      "menu",
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "vietnamese"
    ]
  }
}
```

### Roboto Font

Google's ubiquitous Android font with comprehensive subset support:

```json theme={null}
{
  "name": "roboto",
  "type": "registry:font",
  "title": "Roboto",
  "description": "Roboto — Sans Serif font.",
  "font": {
    "family": "Roboto",
    "provider": "google",
    "import": "Roboto",
    "variable": "--font-roboto",
    "weight": [
      "100",
      "200",
      "300",
      "400",
      "500",
      "600",
      "700",
      "800",
      "900"
    ],
    "subsets": [
      "menu",
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "math",
      "symbols",
      "vietnamese"
    ]
  }
}
```

### Source Code Pro (Monospace)

A monospace font designed for coding:

```json theme={null}
{
  "name": "source-code-pro",
  "type": "registry:font",
  "title": "Source Code Pro",
  "description": "Source Code Pro — Monospace font.",
  "font": {
    "family": "Source Code Pro",
    "provider": "google",
    "import": "Source_Code_Pro",
    "variable": "--font-source-code-pro",
    "weight": [
      "200",
      "300",
      "400",
      "500",
      "600",
      "700",
      "800",
      "900"
    ],
    "subsets": [
      "menu",
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "vietnamese"
    ]
  }
}
```

## Usage in Next.js

### Basic Font Loading

```typescript theme={null}
import { NextResponse } from 'next/server';

interface FontConfig {
  name: string;
  type: 'registry:font';
  title: string;
  font: {
    family: string;
    provider: string;
    import: string;
    variable: string;
    weight: string[];
    subsets: string[];
  };
}

export async function loadFont(name: string): Promise<FontConfig> {
  const response = await fetch(`https://www.fonttrio.xyz/api/r/${name}`);
  
  if (!response.ok) {
    throw new Error(`Font "${name}" not found`);
  }
  
  return response.json();
}

// Usage
const inter = await loadFont('inter');
console.log(inter.font.family); // "Inter"
console.log(inter.font.variable); // "--font-inter"
```

### Dynamic Font Loading with next/font/google

```typescript theme={null}
import { NextResponse } from 'next/server';

interface FontConfig {
  font: {
    family: string;
    import: string;
    variable: string;
    weight: string[];
    subsets: string[];
  };
}

async function loadFontConfig(name: string): Promise<FontConfig> {
  const response = await fetch(`https://www.fonttrio.xyz/api/r/${name}`);
  return response.json();
}

// In your app
const config = await loadFontConfig('inter');

// Generate next/font configuration
const fontConfig = {
  weight: config.font.weight,
  subsets: config.font.subsets.filter(s => s !== 'menu'),
  variable: config.font.variable,
  display: 'swap' as const,
};

console.log(fontConfig);
// {
//   weight: ["100", "200", ...],
//   subsets: ["latin", "latin-ext", ...],
//   variable: "--font-inter",
//   display: "swap"
// }
```

### Loading Multiple Fonts for a Pairing

```typescript theme={null}
interface PairingDependencies {
  registryDependencies: string[];
}

async function loadPairingFonts(pairingName: string) {
  // First, get the pairing to find dependencies
  const pairingResponse = await fetch(
    `https://www.fonttrio.xyz/api/r/${pairingName}`
  );
  const pairing: PairingDependencies = await pairingResponse.json();
  
  // Extract font names from URLs
  const fontNames = pairing.registryDependencies.map(
    url => url.split('/').pop()?.replace('.json', '') || ''
  );
  
  // Load all fonts in parallel
  const fonts = await Promise.all(
    fontNames.map(name => 
      fetch(`https://www.fonttrio.xyz/api/r/${name}`)
        .then(res => res.json())
    )
  );
  
  return fonts;
}

// Usage
const fonts = await loadPairingFonts('minimal');
console.log(fonts.map(f => f.font.family));
// ["Geist", "Geist Mono"]
```

## Font Classification

Fonts in the registry are typically classified as:

| Classification  | Description                              | Examples                                     |
| --------------- | ---------------------------------------- | -------------------------------------------- |
| **Sans Serif**  | Modern, clean fonts without serifs       | Inter, Roboto, Work Sans                     |
| **Serif**       | Traditional fonts with decorative serifs | Playfair Display, PT Serif, Source Serif 4   |
| **Monospace**   | Fixed-width fonts for code               | Source Code Pro, Roboto Mono, JetBrains Mono |
| **Display**     | Decorative fonts for headlines           | Archivo Black, Bebas Neue                    |
| **Handwriting** | Script and handwritten styles            | Pacifico, Satisfy                            |

## Weight Ranges

### Full Range (100-900)

Most variable fonts and comprehensive font families:

```json theme={null}
["100", "200", "300", "400", "500", "600", "700", "800", "900"]
```

### Standard Range (300-700)

Common for many sans-serif fonts:

```json theme={null}
["300", "400", "500", "600", "700"]
```

### Basic (400, 700)

Minimal font files with regular and bold:

```json theme={null}
["400", "700"]
```

### Single Weight

Display or specialized fonts:

```json theme={null}
["400"]
```

## Common Subset Combinations

### Western Languages

```json theme={null}
["menu", "latin", "latin-ext"]
```

### Western + European

```json theme={null}
["menu", "cyrillic", "cyrillic-ext", "greek", "latin", "latin-ext"]
```

### Comprehensive (Most Google Fonts)

```json theme={null}
[
  "menu",
  "cyrillic", "cyrillic-ext",
  "greek", "greek-ext",
  "latin", "latin-ext",
  "vietnamese"
]
```

### With Symbols

```json theme={null}
[
  "menu", "latin", "latin-ext",
  "math", "symbols"
]
```

## Fetching Font Data

### Direct API Call

<CodeGroup>
  ```bash cURL theme={null}
  curl https://www.fonttrio.xyz/api/r/inter
  ```

  ```javascript JavaScript theme={null}
  const response = await fetch('https://www.fonttrio.xyz/api/r/inter');
  const font = await response.json();

  console.log(font.font.family); // "Inter"
  console.log(font.font.weight); // ["100", "200", ...]
  ```

  ```python Python theme={null}
  import requests

  response = requests.get('https://www.fonttrio.xyz/api/r/roboto')
  font = response.json()

  print(font['font']['family'])  # "Roboto"
  print(font['font']['subsets'])  # ["menu", "latin", ...]
  ```
</CodeGroup>

## See Also

<CardGroup cols={2}>
  <Card title="Pairing Schema" icon="layer-group" href="/api/pairing-schema">
    Schema for complete font pairings
  </Card>

  <Card title="API Endpoints" icon="code" href="/api/endpoints">
    Complete endpoint reference with examples
  </Card>
</CardGroup>