# Supported Font Families in Diagram Design: A Complete Guide

> Discover supported font families in Diagram Design including Geist, Geist Mono, and Instrument Serif. Learn about cross-platform compatibility and fallbacks for clear visual communication.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: getting-started
- Published: 2026-08-23

---

**Diagram Design utilizes three core font families—Geist (sans-serif) for primary text and labels, Geist Mono for technical annotations and code values, and Instrument Serif for document titles—defined in the HTML templates with comprehensive fallbacks for cross-platform compatibility.**

The `cathrynlavery/diagram-design` repository implements a strict, purpose-driven typography system to ensure visual consistency across technical diagrams. By centralizing font definitions in CSS custom properties, the system allows designers to maintain readable hierarchies while supporting multilingual content through strategic fallback chains.

## Core Font Families Defined in template.html

In [`skills/diagram-design/assets/template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template.html), the framework declares three CSS custom properties that govern all typographic rendering. These variables establish a clear hierarchy between human-readable content, technical data, and high-level headings.

### Geist Sans (--font-sans)

The `--font-sans: 'Geist', system-ui, sans-serif;` declaration sets **Geist** as the default typeface for **node names, headings, titles, and most body text**. This modern sans-serif provides high legibility for the primary narrative content in diagrams.

### Geist Mono (--font-mono)

Defined as `--font-mono: 'Geist Mono', ui-monospace, monospace;`, **Geist Mono** serves as the monospaced companion for **technical sub-labels, arrow annotations, field names, code-like values, and any data requiring alignment** such as ports, URLs, and timestamps.

### Instrument Serif (--font-serif)

The `--font-serif: 'Instrument Serif', serif;` variable reserves **Instrument Serif** for **page titles and occasional annotation callouts**. Its serif style adds subtle visual weight to high-level headings, distinguishing document titles from diagram content.

## Fallbacks and CJK Language Support

The supported font families in Diagram Design include robust fallback strategies to ensure rendering on systems lacking the custom fonts and to support non-Latin scripts.

### System Font Fallbacks

Each CSS variable includes generic fallbacks—`system-ui`, `ui-monospace`, `sans-serif`, and `monospace`—to guarantee baseline rendering across operating systems. These backups activate automatically when the primary Geist or Instrument Serif fonts are unavailable.

### CJK Extensions

For East Asian languages, [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md) explicitly extends font families on individual `<text>` elements with CJK-friendly alternatives including **Hiragino Sans**, **Noto Sans JP**, and **Yu Gothic**. This extension ensures proper character rendering for Japanese, Chinese, and Korean labels without breaking the visual hierarchy.

## Implementing the Font Stack

To utilize the supported font families, import the Google Fonts CDN link and define the CSS variables in your template's `<head>` section:

```html
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"
      rel="stylesheet">
<style>
  :root {
    --font-sans:  'Geist', system-ui, sans-serif;
    --font-mono:  'Geist Mono', ui-monospace, monospace;
    --font-serif: 'Instrument Serif', serif;
  }
  body { font-family: var(--font-sans); }
  .eyebrow { font-family: var(--font-mono); }
  h1 { font-family: var(--font-serif); }
</style>

```

Reference these variables within SVG diagram elements to maintain consistency:

```svg
<text x="150" y="30" font-family="var(--font-sans)" font-size="16" font-weight="600">
  Service Name
</text>
<text x="150" y="55" font-family="var(--font-mono)" font-size="12">
  GET /api/v1/resource
</text>
<text x="150" y="80" font-family="var(--font-serif)" font-size="20">
  Architecture Diagram
</text>

```

For CJK content, explicitly declare the extended fallback chain:

```svg
<text font-family="'Geist', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif"
      x="200" y="120" font-size="14">
  認証サービス
</text>

```

## Source Code Reference

The following files in `cathrynlavery/diagram-design` define and demonstrate the typography system:

- [`skills/diagram-design/assets/template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template.html) — Base HTML template importing fonts and declaring CSS variables.
- [`skills/diagram-design/assets/template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template-full.html) — Full-page implementation showing fonts across complex diagrams.
- [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md) — Official typography specification mapping label types to font families.
- [`skills/diagram-design/references/type-gantt.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-gantt.md) — Demonstrates Geist for task names and Geist Mono for time-axis labels.
- [`skills/diagram-design/references/type-org-chart.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-org-chart.md) — Shows Geist sans for role titles and Geist Mono for technical tags.
- [`skills/diagram-design/references/type-primitive-annotation.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-primitive-annotation.md) — Uses Instrument Serif for annotation callouts.

## Summary

- **Three core families**: Geist (sans) for primary text, Geist Mono for technical data, and Instrument Serif for titles.
- **Defined in**: [`skills/diagram-design/assets/template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template.html) using CSS custom properties (`--font-sans`, `--font-mono`, `--font-serif`).
- **Fallbacks included**: System fonts (`system-ui`, `monospace`) plus CJK extensions (Hiragino Sans, Noto Sans JP, Yu Gothic) per [`style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/style-guide.md).
- **Implementation**: Import via Google Fonts CDN and reference through CSS variables in SVG `<text>` elements.
- **Multilingual support**: Extended font stacks ensure proper rendering for Japanese, Chinese, and Korean characters.

## Frequently Asked Questions

### What are the three main font families supported in Diagram Design?

The supported font families are **Geist** (a modern sans-serif for general text), **Geist Mono** (a monospaced font for technical annotations), and **Instrument Serif** (a serif typeface for titles and callouts). These are declared as CSS variables in [`skills/diagram-design/assets/template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template.html).

### How do I render Chinese, Japanese, or Korean text in Diagram Design diagrams?

For CJK scripts, extend the font-family declaration to include **Hiragino Sans**, **Noto Sans JP**, or **Yu Gothic** as specified in [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md). Declare these fallbacks directly on the SVG `<text>` element alongside the primary Geist font.

### Where are the font CSS variables defined in the repository?

The CSS custom properties `--font-sans`, `--font-mono`, and `--font-serif` are defined in [`skills/diagram-design/assets/template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template.html) within the `<style>` block. This file serves as the base template for all diagram generation.

### Can I use custom fonts outside the standard three families?

While the system is optimized for Geist, Geist Mono, and Instrument Serif, you can override the CSS variables or add additional `@font-face` declarations in your template. However, for consistency with the design system defined in [`style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/style-guide.md), it is recommended to maintain the core three families with extended fallbacks rather than substituting entirely new typefaces.