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

# Theme Editor - Typography

> Configure font families and scale for headings and body text across the storefront.

<Frame caption="Theme Editor > Typography">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-typography.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=a0048375a5a7ce12e74df96ebb6e1e79" alt="Typography settings panel in the theme editor" width="1920" height="1080" data-path="images/theme-editor-typography.webp" />
</Frame>

The Typography panel controls which fonts appear on your storefront and how large they render. Fonts are loaded from Google Fonts — the full catalogue is available in the dropdown. Changes apply globally across every page.

## Headings

| Setting | Type     | Default | Range                  | Description                                         |
| ------- | -------- | ------- | ---------------------- | --------------------------------------------------- |
| Font    | Dropdown | Inter   | Google Fonts catalogue | Font family for all headings (H1–H3).               |
| Scale   | Slider   | 100%    | 50–150%                | Proportionally scales all heading sizes up or down. |

## Body

| Setting | Type     | Default | Range                  | Description                                           |
| ------- | -------- | ------- | ---------------------- | ----------------------------------------------------- |
| Font    | Dropdown | Inter   | Google Fonts catalogue | Font family for body text, labels, and descriptions.  |
| Scale   | Slider   | 100%    | 50–150%                | Proportionally scales all body text sizes up or down. |

<Note>
  The font scale adjusts all sizes proportionally — individual heading levels (H1, H2, H3) and body text sizes are not configurable independently. Set scale to 100% for the default sizing.
</Note>

## CSS variables

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-heading-font-family: Inter;
    --storefront-heading-font-scale: 100%;
    --storefront-body-font-family: Inter;
    --storefront-body-font-scale: 100%;
  }
  ```
</CodeGroup>

## Related

<CardGroup cols={2}>
  <Card title="Colors" icon="palette" href="/docs/sales-channels/online-store/theme-editor/settings/colors">
    Define the storefront colour palette.
  </Card>

  <Card title="Layout" icon="columns-3" href="/docs/sales-channels/online-store/theme-editor/settings/layout">
    Control page width and spacing.
  </Card>
</CardGroup>