fontfyi

Pure TypeScript toolkit for working with Google Fonts. Access metadata for 50 popular fonts, generate CSS import URLs and <link> tags, browse 15 curated font pairings, and use 10 system font stack presets.

Zero runtime dependencies. Works in Node.js, Deno, Bun, and browsers.

Explore fonts interactively at fontfyi.com -- font explorer, font pairings, font stacks, and developer API.

Table of Contents

• Install
• Quick Start
• What You Can Do
  • Font Metadata
  • CSS Generation
  • Font Pairings
  • Font Stacks
  • Weight Parsing
• API Reference
• Types
• Data Coverage
• Learn More About Fonts
• Also Available for Python
• FYIPedia Developer Tools
• License

Install

npm install fontfyi

Quick Start

import { fontInfo, fontCSS, fontPairings, fontStacks } from "fontfyi";

// Look up a font
const font = fontInfo("inter");
console.log(font?.family);    // "Inter"
console.log(font?.category);  // "sans-serif"
console.log(font?.designer);  // "Rasmus Andersson"

// Generate CSS
const css = fontCSS("inter", [400, 700]);
console.log(css?.importUrl);
// "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
console.log(css?.linkTag);
// '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">'
console.log(css?.fontFamily);
// "'Inter', sans-serif"

// Font pairings
const pairs = fontPairings("inter");
for (const p of pairs) {
  console.log(`${p.heading} + ${p.body} (${p.mood})`);
}

// Font stacks
const stacks = fontStacks();
console.log(stacks[0].name);   // "System UI"
console.log(stacks[0].stack);  // "system-ui, -apple-system, ..."

What You Can Do

Font Metadata

Google Fonts hosts over 1,600 font families, but choosing the right one for your project can be overwhelming. This package bundles curated metadata for the 50 most popular Google Fonts -- the fonts that power the majority of the web.

Each font entry includes family name, CSS category (serif, sans-serif, monospace, display, handwriting), available weights, supported character subsets (Latin, Cyrillic, Greek, etc.), designer name, popularity rank, recommended use cases, and similar font suggestions.

| Category | Fonts | Examples | |----------|-------|---------| | Sans-serif | 20 | Inter, Roboto, Open Sans, Lato, Montserrat | | Serif | 10 | Merriweather, Playfair Display, Lora, PT Serif | | Monospace | 8 | Roboto Mono, JetBrains Mono, IBM Plex Mono, Fira Code | | Display | 8 | Oswald, Bebas Neue, Abril Fatface, Righteous | | Handwriting | 4 | Dancing Script, Pacifico, Caveat, Sacramento |

import { fontInfo, fontSearch, popularFonts, byCategory, allFonts } from "fontfyi";

// Look up by slug
const inter = fontInfo("inter");
console.log(inter?.variants);       // ["100", "200", ..., "900"]
console.log(inter?.subsets);        // ["cyrillic", "greek", "latin", ...]
console.log(inter?.bestFor);        // ["ui", "web-app", "dashboard", ...]
console.log(inter?.similarFonts);   // ["roboto", "dm-sans", ...]

// Search by name
const results = fontSearch("mono");
// Roboto Mono, IBM Plex Mono, JetBrains Mono, ...

// Top fonts by popularity
const top10 = popularFonts(10);
console.log(top10[0].family);  // "Roboto"

// Filter by category
const serifs = byCategory("serif");
const monos = byCategory("monospace");

// Get all 50 fonts
const all = allFonts();

Learn more: Font Explorer · Font Categories · REST API Docs

CSS Generation

Generate Google Fonts import URLs, HTML <link> tags, and font-family declarations.

import { fontCSS, googleFontsUrl, googleFontsLink, cssFamily } from "fontfyi";

// High-level: get everything at once
const css = fontCSS("roboto-mono", [400, 700]);
console.log(css?.importUrl);   // Google Fonts CSS URL
console.log(css?.linkTag);     // <link rel="stylesheet" href="...">
console.log(css?.fontFamily);  // "'Roboto Mono', monospace"

// Low-level utilities
googleFontsUrl("Inter", [400, 700]);
// "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"

googleFontsLink("Inter", [400, 700]);
// '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">'

cssFamily("Inter", "sans-serif");  // "'Inter', sans-serif"

Learn more: CSS Generator Tool · Google Fonts API

Font Pairings

Typography pairing is both an art and a science. A well-chosen heading + body font combination creates visual hierarchy, reinforces brand identity, and improves readability. Browse 15 curated heading + body font pairings with design rationale, quality scores, use cases, and mood classification.

import { fontPairings, PAIRINGS, featuredPairings } from "fontfyi";

// Pairings for a specific font
const pairs = fontPairings("inter");
for (const p of pairs) {
  console.log(`${p.heading} + ${p.body}`);
  console.log(`  Score: ${p.score}/10`);
  console.log(`  Mood: ${p.mood}`);
  console.log(`  Use cases: ${p.useCases.join(", ")}`);
  console.log(`  ${p.rationale}`);
}

// All 15 pairings
console.log(PAIRINGS.length);  // 15

// Only high-quality pairings (score >= 8)
const best = featuredPairings();

Learn more: Font Pairing Tool · Typography Glossary

Font Stacks

Use 10 system font stack presets for CSS font-family declarations without loading external fonts.

import { fontStacks, getStack, FONT_STACKS } from "fontfyi";

// Get all stacks
const stacks = fontStacks();

// Look up by slug
const code = getStack("monospace-code");
console.log(code?.stack);
// "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace"

// Available stacks: system-ui, transitional, old-style, humanist,
// geometric-humanist, neo-grotesque, monospace-slab, monospace-code,
// industrial, rounded

Learn more: Font Stack Presets · System Font Stacks

Weight Parsing

Parse Google Fonts variant strings into numeric weights.

import { parseVariants, weightName } from "fontfyi";

const [weights, hasItalic] = parseVariants(["100", "regular", "700", "italic", "700italic"]);
console.log(weights);    // [100, 400, 700]
console.log(hasItalic);  // true

weightName(400);  // "Regular"
weightName(700);  // "Bold"

API Reference

Engine Functions

| Function | Description | |----------|-------------| | fontInfo(slug) | Get font metadata by slug | | fontSearch(query, limit?) | Search fonts by name | | fontCSS(slug, weights?) | Generate CSS import snippet | | fontPairings(slug) | Get pairing recommendations | | fontStacks() | Get all 10 font stack presets | | popularFonts(limit?) | Get top fonts by popularity |

Data Functions

| Function | Description | |----------|-------------| | getFont(slug) | Look up font by slug | | search(query, limit?) | Search fonts by family name | | byCategory(category) | Filter fonts by CSS category | | popular(limit?) | Get fonts sorted by popularity | | allFonts() | Get all 50 fonts | | fontCount() | Get total font count |

CSS Utilities

| Function | Description | |----------|-------------| | googleFontsUrl(family, weights?) | Google Fonts CSS import URL | | googleFontsLink(family, weights?) | HTML <link> tag | | googleDownloadUrl(family) | Google Fonts download URL | | cssFamily(family, category) | CSS font-family with fallback | | parseVariants(variants) | Parse variant strings to weights | | weightName(weight) | Numeric weight to name (e.g. 400 -> "Regular") |

Stack & Pairing Functions

| Function | Description | |----------|-------------| | getStack(slug) | Look up font stack by slug | | getPairingsFor(slug) | Get pairings for a font | | featuredPairings() | Get pairings with score >= 8 |

Constants

| Constant | Description | |----------|-------------| | FONT_STACKS | Array of 10 font stack presets | | PAIRINGS | Array of 15 font pairings | | WEIGHT_NAMES | Map of numeric weights to names | | CATEGORY_FALLBACKS | Map of categories to CSS fallbacks |

Types

interface FontInfo {
  slug: string;
  family: string;
  category: string;
  subcategory: string;
  variants: string[];
  subsets: string[];
  version: string;
  lastModified: string;
  designer: string;
  popularityRank: number;
  bestFor: string[];
  similarFonts: string[];
}

interface FontStack {
  slug: string;
  name: string;
  description: string;
  stack: string;
}

interface FontPairing {
  heading: string;
  body: string;
  rationale: string;
  score: number;
  useCases: string[];
  mood: string;
}

interface FontCSSResult {
  importUrl: string;
  linkTag: string;
  fontFamily: string;
}

Data Coverage

• 50 Google Fonts -- the most popular fonts by usage, spanning sans-serif, serif, monospace, display, and handwriting categories
• 15 Font Pairings -- curated heading + body combinations with design rationale
• 10 Font Stacks -- system font stack presets for every use case
• Zero dependencies -- pure TypeScript, ESM-only, full type declarations

Browse the full collection at fontfyi.com/fonts/.

Learn More About Fonts

• Browse: Google Fonts · Font Search · Categories
• Tools: Font Pairing · CSS Generator
• API: REST API Docs · OpenAPI Spec
• Python: PyPI Package

Also Available for Python

pip install fontfyi

See the Python package on PyPI.

FYIPedia Developer Tools

Part of the FYIPedia open-source developer tools ecosystem.

| Package | PyPI | npm | Description | |---------|------|-----|-------------| | colorfyi | PyPI | npm | Color conversion, WCAG contrast, harmonies -- colorfyi.com | | emojifyi | PyPI | npm | Emoji encoding & metadata for 3,953 emojis -- emojifyi.com | | symbolfyi | PyPI | npm | Symbol encoding in 11 formats -- symbolfyi.com | | unicodefyi | PyPI | npm | Unicode lookup with 17 encodings -- unicodefyi.com | | fontfyi | PyPI | npm | Google Fonts metadata & CSS -- fontfyi.com | | distancefyi | PyPI | npm | Haversine distance & travel times -- distancefyi.com | | timefyi | PyPI | npm | Timezone ops & business hours -- timefyi.com | | namefyi | PyPI | npm | Korean romanization & Five Elements -- namefyi.com | | unitfyi | PyPI | npm | Unit conversion, 220 units -- unitfyi.com | | holidayfyi | PyPI | npm | Holiday dates & Easter calculation -- holidayfyi.com | | cocktailfyi | PyPI | -- | Cocktail ABV, calories, flavor -- cocktailfyi.com | | fyipedia | PyPI | -- | Unified CLI: fyi color info FF6B35 -- fyipedia.com | | fyipedia-mcp | PyPI | -- | Unified MCP hub for AI assistants -- fyipedia.com |

License

MIT