> ## 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.

# font

```ts theme={null}
const font: {
  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}";
     };
     mono: {
        value: "\"DM Mono\", monospace";
     };
     sans: {
        value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
     };
     body: {
        value: "{font.family.sans}";
     };
     interactive: {
        value: "{font.family.sans}";
     };
  };
  url: {
     iframe: {
        value: "";
     };
  };
  size: {
     base: {
        value: 16;
     };
  };
};
```

All the 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}"`; }; `mono`: \{ `value`: ""DM Mono", monospace"; }; `sans`: \{ `value`: ""Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol""; }; `body`: \{ `value`: `"{font.family.sans}"`; }; `interactive`: \{ `value`: `"{font.family.sans}"`; }; } | -                                                                                                                                                                 |
| `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}"`                                                                                                                                     |
| `family.mono`              | \{ `value`: ""DM Mono", monospace"; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                                                                                                                 |
| `family.mono.value`        | ""DM Mono", monospace"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `'"DM Mono", monospace'`                                                                                                                                          |
| `family.sans`              | \{ `value`: ""Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol""; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                                                                                                                                                                 |
| `family.sans.value`        | ""Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol""                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'"Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'` |
| `family.body`              | \{ `value`: `"{font.family.sans}"`; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                                                                                                                 |
| `family.body.value`        | `"{font.family.sans}"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `"{font.family.sans}"`                                                                                                                                            |
| `family.interactive`       | \{ `value`: `"{font.family.sans}"`; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                                                                                                                 |
| `family.interactive.value` | `"{font.family.sans}"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `"{font.family.sans}"`                                                                                                                                            |
| <a id="url" /> `url`       | \{ `iframe`: \{ `value`: `""`; }; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                                                                                                                 |
| `url.iframe`               | \{ `value`: `""`; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                                                                                                                 |
| `url.iframe.value`         | `""`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `""`                                                                                                                                                              |
| <a id="size" /> `size`     | \{ `base`: \{ `value`: `16`; }; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                                                                                                                                 |
| `size.base`                | \{ `value`: `16`; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                                                                                                                 |
| `size.base.value`          | `16`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `16`                                                                                                                                                              |