getAllPairings

Retrieve all available font pairings from the Fonttrio registry

Function Signature

function getAllPairings(): PairingData[]

Description

Returns the complete array of all font pairings available in Fonttrio. This function provides access to the entire curated collection of typography combinations, each with detailed configuration including heading fonts, body fonts, monospace fonts, mood tags, use cases, and typography scales.

Parameters

This function takes no parameters.

Return Value

return · PairingData[]

An array of all available font pairings. Each PairingData object contains:

Show PairingData properties

name · string · required

Unique identifier for the pairing (e.g., “agency”, “architect”)

heading · string · required

Font family name for headings (e.g., “Schibsted Grotesk”)

headingCategory · FontCategory · required

Category of the heading font: "serif", "sans-serif", or "monospace"

body · string · required

Font family name for body text (e.g., “Karla”)

bodyCategory · FontCategory · required

Category of the body font: "serif", "sans-serif", or "monospace"

mono · string · required

Font family name for monospace/code text (e.g., “Fira Code”)

mood · string[] · required

Array of mood tags (e.g., [“minimal”, “nordic”])

useCase · string[] · required

Array of recommended use cases (e.g., [“agency”, “design”, “portfolio”])

description · string · required

Human-readable description of the pairing’s aesthetic and personality

scale · TypographyScale · required

Complete typography scale with configurations for h1-h6 and body text, including size, weight, line height, and letter spacing

googleFontsUrl · string · required

Ready-to-use Google Fonts URL with all required font weights

Usage Examples

Basic Usage

import { getAllPairings } from '@/lib/pairings';

const allPairings = getAllPairings();
console.log(`Total pairings available: ${allPairings.length}`);

import { getAllPairings } from '@/lib/pairings';

const pairings = getAllPairings();
const names = pairings.map(p => p.name);

console.log('Available pairings:', names);
// Output: ['agency', 'architect', ...]

import { getAllPairings } from '@/lib/pairings';

function PairingSelector() {
  const pairings = getAllPairings();
  
  return (
    <select>
      {pairings.map(pairing => (
        <option key={pairing.name} value={pairing.name}>
          {pairing.heading} + {pairing.body}
        </option>
      ))}
    </select>
  );
}

import { getAllPairings } from '@/lib/pairings';

const allPairings = getAllPairings();
const serifHeadings = allPairings.filter(
  p => p.headingCategory === 'serif'
);

console.log(`Pairings with serif headings: ${serifHeadings.length}`);

import { getAllPairings } from '@/lib/pairings';

const pairings = getAllPairings();
const googleFontsUrls = pairings.map(p => p.googleFontsUrl);

// Preload all fonts
googleFontsUrls.forEach(url => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.head.appendChild(link);
});

Example Response

[
  {
    "name": "agency",
    "heading": "Schibsted Grotesk",
    "headingCategory": "sans-serif",
    "body": "Karla",
    "bodyCategory": "sans-serif",
    "mono": "Fira Code",
    "mood": ["minimal", "nordic"],
    "useCase": ["agency", "design", "portfolio"],
    "description": "Nordic minimalism meets grotesque warmth. Schibsted Grotesk's Scandinavian clarity in headlines paired with Karla's quirky grotesque personality for body text that feels human.",
    "scale": {
      "h1": {
        "size": "2.25rem",
        "weight": 700,
        "lineHeight": "1.15",
        "letterSpacing": "-0.03em"
      },
      "h2": {
        "size": "1.875rem",
        "weight": 600,
        "lineHeight": "1.2",
        "letterSpacing": "-0.025em"
      },
      "body": {
        "size": "1rem",
        "lineHeight": "1.6",
        "weight": 400
      }
    },
    "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Karla:wght@400;500;600&family=Fira+Code:wght@400;500&display=swap"
  }
]

Notes

Performance: This function returns the entire pairings array. The data is loaded once from pairings-data.ts and cached in memory, making subsequent calls very fast.

Data Source: The pairings data is auto-generated from registry/pairings/*.json files. Do not edit lib/pairings-data.ts manually.

For filtered results, consider using specialized functions like getPairingsByMood or getPairingsByCategory instead of filtering manually.