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

name · string · required

Unique identifier for the font, typically the font family name in lowercase with hyphens

Examples: "inter", "roboto", "source-code-pro"

type · string · required

Registry type identifier. Always "registry:font" for individual fonts.

title · string · required

Human-readable font name, typically the proper font family name

Examples: "Inter", "Roboto", "Source Code Pro"

description · 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."

Font Configuration

font · object · required

Complete font configuration for loading and usage

family · string · required

The font family name as it should appear in CSS

Examples: "Inter", "Roboto", "Source Code Pro"

provider · string · required

Font provider service

Value: "google" (Google Fonts is the primary provider)

import · string · required

Import name for loading the font from the provider

Typically matches the family field

Examples: "Inter", "Roboto", "Source_Code_Pro"

variable · string · required

CSS custom property name for the font

Format: "--font-{name}"

Examples: "--font-inter", "--font-roboto", "--font-source-code-pro"

weight · 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

subsets · 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

Complete Examples

Inter Font

A popular sans-serif font with extensive language support:

{
  "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:

{
  "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:

{
  "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

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

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

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:

["100", "200", "300", "400", "500", "600", "700", "800", "900"]

Standard Range (300-700)

Common for many sans-serif fonts:

["300", "400", "500", "600", "700"]

Basic (400, 700)

Minimal font files with regular and bold:

["400", "700"]

Single Weight

Display or specialized fonts:

["400"]

Common Subset Combinations

Western Languages

["menu", "latin", "latin-ext"]

Western + European

["menu", "cyrillic", "cyrillic-ext", "greek", "latin", "latin-ext"]

Comprehensive (Most Google Fonts)

[
  "menu",
  "cyrillic", "cyrillic-ext",
  "greek", "greek-ext",
  "latin", "latin-ext",
  "vietnamese"
]

With Symbols

[
  "menu", "latin", "latin-ext",
  "math", "symbols"
]

Fetching Font Data

Direct API Call

cURL

curl https://www.fonttrio.xyz/api/r/inter

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", ...]

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", ...]

See Also

Pairing Schema

Schema for complete font pairings

API Endpoints

Complete endpoint reference with examples