> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Graph fonts

> Customize the font families in your graphs

## Setup

### 1. Load your fonts

Ensure your fonts are loaded via `@font-face` or a web font service (e.g. Google Fonts).

### 2. Register fonts with GraphProvider

```tsx theme={null}
<GraphProvider
  fontList={[
    { id: 'custom-serif', label: 'Custom Serif', fontFamily: 'Garamond, serif' },
    { id: 'custom-sans', label: 'Custom Sans', fontFamily: 'Helvetica Neue, sans-serif' },
  ]}
>
  {/* ... */}
</GraphProvider>
```

### 3. Apply fonts in config

```tsx theme={null}
<Graph
  config={{
    appearance: {
      textStyle: {
        heading: { fontId: 'custom-serif' /* color: '#1a1a1a' */ },
        body: { fontId: 'custom-sans' /* color: '#4a5568' */ },
      },
    },
  }}
/>
```

## Reference

### fontList

Array of font definitions passed to `GraphProvider`.

<ParamField path="id" type="string" required>
  Unique identifier referenced by `fontId` in the config.
</ParamField>

<ParamField path="label" type="string" required>
  Display name shown in the font picker UI.
</ParamField>

<ParamField path="fontFamily" type="string" required>
  CSS font-family value with fallbacks (e.g. `'Helvetica Neue', Arial, sans-serif`).
</ParamField>

### appearance.textStyle

<ParamField path="heading" type="object" optional>
  Font and color for titles and subtitles. Accepts `fontId` and `color`.
</ParamField>

<ParamField path="body" type="object" optional>
  Font and color for axis labels, legends, captions, and annotations. Accepts `fontId` and `color`.
</ParamField>