Skip to main content

​
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

<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

<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.
​
id
string
required
Unique identifier referenced by fontId in the config.
​
label
string
required
Display name shown in the font picker UI.
​
fontFamily
string
required
CSS font-family value with fallbacks (e.g. 'Helvetica Neue', Arial, sans-serif).

​
appearance.textStyle

​
heading
object
Font and color for titles and subtitles. Accepts fontId and color.
​
body
object
Font and color for axis labels, legends, captions, and annotations. Accepts fontId and color.