Skip to main content

​
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 hyphensExamples: "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 nameExamples: "Inter", "Roboto", "Source Code Pro"
​
description
string
required
Brief description of the font, typically including classificationFormat: "{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 CSSExamples: "Inter", "Roboto", "Source Code Pro"
​
provider
string
required
Font provider serviceValue: "google" (Google Fonts is the primary provider)
​
import
string
required
Import name for loading the font from the providerTypically matches the family fieldExamples: "Inter", "Roboto", "Source_Code_Pro"
​
variable
string
required
CSS custom property name for the fontFormat: "--font-{name}"Examples: "--font-inter", "--font-roboto", "--font-source-code-pro"
​
weight
string[]
required
Array of available font weightsValues: Weight values from "100" to "900" in increments of 100Example: ["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 fontCommon 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:
ClassificationDescriptionExamples
Sans SerifModern, clean fonts without serifsInter, Roboto, Work Sans
SerifTraditional fonts with decorative serifsPlayfair Display, PT Serif, Source Serif 4
MonospaceFixed-width fonts for codeSource Code Pro, Roboto Mono, JetBrains Mono
DisplayDecorative fonts for headlinesArchivo Black, Bebas Neue
HandwritingScript and handwritten stylesPacifico, 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 https://www.fonttrio.xyz/api/r/inter

​
See Also

Pairing Schema

Schema for complete font pairings

API Endpoints

Complete endpoint reference with examples

Build docs developers (and LLMs) love

Get started for freeTalk to us