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

# Uploading a Custom Font

> Convert a TTF or OTF brand font to WOFF2 and upload it to your storekit ordering page in Design & Branding.

Fonts must meet the [Custom Font File Requirements](/docs/store-designer/custom-fonts).

## Convert a Font to WOFF2

If your brand font came as `.ttf` or `.otf`, convert each file to `.woff2` before uploading. These free tools all work in the browser unless noted:

| Tool | Notes |
| - | - |
| [CloudConvert (TTF to WOFF2)](https://cloudconvert.com/ttf-to-woff2) | Converts one or several files at a time. Also handles [OTF to WOFF2](https://cloudconvert.com/otf-to-woff2). |
| [Transfonter](https://transfonter.org/) | Converts several weights in one go. Tick **WOFF2** as the output format. |
| [Font Squirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) | Refuses fonts whose foundry has not allowed web use, which is a useful licence check. |
| [Google woff2](https://github.com/google/woff2) | Command-line tool for developers: `woff2_compress MyFont-Bold.ttf`. |

<Tip>
  Ask your designer or font foundry for the web font package first. Most commercial fonts ship WOFF2 files with their webfont licence, so you may not need to convert anything.
</Tip>

## Upload a Font

<Steps>
  <Step title="Open Typography">
    Go to **Stores** → your store → **Settings** → **Design & Branding**, then open **Typography**.
  </Step>

  <Step title="Choose the text style">
    Each style has its own font: **Body**, **Heading** and **Accent**. Click **Change** on the one you want to update.
  </Step>

  <Step title="Upload your WOFF2 files">
    Drop in all the weights for that font at once. Check the name shown in **Font name** and edit it if needed.
  </Step>

  <Step title="Save">
    Check the preview, including mobile, then click **Save**. The font is not applied to your live ordering page until you save.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="My font file is greyed out in the file picker">
    The uploader only accepts `.woff2` and `.woff` files. Convert the font to WOFF2 and try again.
  </Accordion>

  <Accordion title="The font name shows an error">
    **Font name** cannot contain special characters such as `&`, `'` or accented letters. Rename it using letters, numbers, spaces, hyphens or underscores.
  </Accordion>

  <Accordion title="Bold text looks the same as regular text">
    Each weight is a separate file. Upload the Bold (and any other) weight alongside Regular in the same upload, or use a variable font.
  </Accordion>
</AccordionGroup>

<CardGroup cols={2}>
  <Card title="Custom Font File Requirements" icon="font" href="/docs/store-designer/custom-fonts">
    Formats, weights, naming and licensing.
  </Card>

  <Card title="Design & Branding" icon="palette" href="/docs/guides/store-settings/branding-design">
    Everything else you can customise on your ordering page.
  </Card>
</CardGroup>


## Related topics

- [Custom Font File Requirements](/docs/store-designer/custom-fonts.md)
- [Customise store design and branding in storekit](/docs/guides/store-settings/branding-design.md)
- [What Your Customer Sees](/docs/payment-links/what-your-customer-sees.md)
- [Custom Kitchen Ticket on a Star Cloud Printer](/docs/guides/build/recipes/custom-kitchen-ticket.md)
- [Videos](/docs/guides/menu-engineering/videos.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.