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

# fontComponents

```ts theme={null}
const fontComponents: {
  family: {
     page: {
        value: "{font.family.body}";
     };
     cta: {
        value: "{font.family.interactive}";
     };
     link: {
        value: "{font.family.interactive}";
     };
     input: {
        value: "{font.family.interactive}";
     };
     select: {
        value: "{font.family.interactive}";
     };
     code: {
        value: "{font.family.mono}";
     };
     iframe: {
        value: "{font.family.interactive}";
     };
  };
  url: {
     iframe: {
        value: "";
     };
  };
};
```

Component font tokens.

## Type declaration

| Name                       | Type                                                                                                                                                                                                                                                                                                                                                                                 | Default value                 |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- |
| <a id="family" /> `family` | \{ `page`: \{ `value`: `"{font.family.body}"`; }; `cta`: \{ `value`: `"{font.family.interactive}"`; }; `link`: \{ `value`: `"{font.family.interactive}"`; }; `input`: \{ `value`: `"{font.family.interactive}"`; }; `select`: \{ `value`: `"{font.family.interactive}"`; }; `code`: \{ `value`: `"{font.family.mono}"`; }; `iframe`: \{ `value`: `"{font.family.interactive}"`; }; } | -                             |
| `family.page`              | \{ `value`: `"{font.family.body}"`; }                                                                                                                                                                                                                                                                                                                                                | -                             |
| `family.page.value`        | `"{font.family.body}"`                                                                                                                                                                                                                                                                                                                                                               | `"{font.family.body}"`        |
| `family.cta`               | \{ `value`: `"{font.family.interactive}"`; }                                                                                                                                                                                                                                                                                                                                         | -                             |
| `family.cta.value`         | `"{font.family.interactive}"`                                                                                                                                                                                                                                                                                                                                                        | `"{font.family.interactive}"` |
| `family.link`              | \{ `value`: `"{font.family.interactive}"`; }                                                                                                                                                                                                                                                                                                                                         | -                             |
| `family.link.value`        | `"{font.family.interactive}"`                                                                                                                                                                                                                                                                                                                                                        | `"{font.family.interactive}"` |
| `family.input`             | \{ `value`: `"{font.family.interactive}"`; }                                                                                                                                                                                                                                                                                                                                         | -                             |
| `family.input.value`       | `"{font.family.interactive}"`                                                                                                                                                                                                                                                                                                                                                        | `"{font.family.interactive}"` |
| `family.select`            | \{ `value`: `"{font.family.interactive}"`; }                                                                                                                                                                                                                                                                                                                                         | -                             |
| `family.select.value`      | `"{font.family.interactive}"`                                                                                                                                                                                                                                                                                                                                                        | `"{font.family.interactive}"` |
| `family.code`              | \{ `value`: `"{font.family.mono}"`; }                                                                                                                                                                                                                                                                                                                                                | -                             |
| `family.code.value`        | `"{font.family.mono}"`                                                                                                                                                                                                                                                                                                                                                               | `"{font.family.mono}"`        |
| `family.iframe`            | \{ `value`: `"{font.family.interactive}"`; }                                                                                                                                                                                                                                                                                                                                         | -                             |
| `family.iframe.value`      | `"{font.family.interactive}"`                                                                                                                                                                                                                                                                                                                                                        | `"{font.family.interactive}"` |
| <a id="url" /> `url`       | \{ `iframe`: \{ `value`: `""`; }; }                                                                                                                                                                                                                                                                                                                                                  | -                             |
| `url.iframe`               | \{ `value`: `""`; }                                                                                                                                                                                                                                                                                                                                                                  | -                             |
| `url.iframe.value`         | `""`                                                                                                                                                                                                                                                                                                                                                                                 | `""`                          |