# fonts.customFonts

Part of [Fonts](https://kernstra.com/docs/web-sdk/config/fonts) in the Kernstra Web SDK 1.0.0 configuration reference.

- Type: `CustomFont[]`
- Page: https://kernstra.com/docs/web-sdk/config/fonts/customfonts

Your own fonts: the same bag [`FontRegistry.registerCustomFont()`](https://kernstra.com/docs/web-sdk/api/fontregistry/registercustomfont) takes. **Your own fonts are never gated.** `customFonts` (a URL you serve or bytes you hold) works under every license, and so do the fonts embedded in the documents you open. The license governs where _our_ fonts come from, not which fonts you use. A viewer's fonts are the ones `customFonts` names when it is created; there is no method to add one to a running viewer. [`FontRegistry`](https://kernstra.com/docs/web-sdk/api/fontregistry) is exported for loading fonts outside a viewer — fonts you register with one you construct yourself are not seen by any viewer.

```ts
// Register a custom font from URL
fonts: {
  customFonts: [
    {
      id: 'my-serif',
      displayName: 'My Serif',
      ttfUrl: 'https://cdn.example.com/fonts/MySerif-Regular.ttf',
      category: 'serif',
    },
  ],
}
```

### `customFonts.id`

- Type: `string`
- Required
- Page: https://kernstra.com/docs/web-sdk/config/fonts/customfonts-id

Unique font identifier.

### `customFonts.displayName`

- Type: `string`
- Required
- Page: https://kernstra.com/docs/web-sdk/config/fonts/customfonts-displayname

Name shown in the font picker.

### `customFonts.ttfUrl`

- Type: `string`
- Page: https://kernstra.com/docs/web-sdk/config/fonts/customfonts-ttfurl

URL to a TTF file (fetched on demand). The file must be at most 24 MB and served as font bytes (an HTML response is refused); serve it with CORS headers when it is on another origin.

### `customFonts.ttfBytes`

- Type: `Uint8Array`
- Page: https://kernstra.com/docs/web-sdk/config/fonts/customfonts-ttfbytes

Pre-loaded TTF bytes (skips the fetch). The only kind of custom font that works with `download: false`.

### `customFonts.category`

- Type: `'sans-serif' | 'serif' | 'monospace' | 'display'`
- Default: `'sans-serif'`
- Page: https://kernstra.com/docs/web-sdk/config/fonts/customfonts-category

The kind of face, for matching a substitute.

### `customFonts.cssFallback`

- Type: `string`
- Default: `the display name, then sans-serif`
- Page: https://kernstra.com/docs/web-sdk/config/fonts/customfonts-cssfallback

CSS `font-family` stack for previews.

Web page: https://kernstra.com/docs/web-sdk/config/fonts/customfonts