> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/theme-settings/typography.md).

# Typography

{% hint style="info" %}
**Theme Editor → Theme settings → Typography**
{% endhint %}

<figure><img src="/files/RiLwNHD5ztFdk0pf4Ryv" alt=""><figcaption></figcaption></figure>

***

### Typography that does the talking before customers read a word

Your font choices communicate personality the moment the page loads — before a customer reads a single word of product copy. A serif accent font signals tradition and craft. A geometric sans-serif reads as clean and modern. A bold display face says confidence. Avante ships with 9 carefully curated presets that pair fonts the way a designer would, so you get a coherent typographic identity without needing to know what "kerning" means.

***

### Typography preset

<figure><img src="/files/4ydtq5myiIt7M8PcrDXu" alt=""><figcaption></figcaption></figure>

Each preset defines a combination of Base and Accent fonts with pre-configured sizes optimized for readability at every scale.

<table data-search="false"><thead><tr><th>Preset</th><th>Character</th></tr></thead><tbody><tr><td><strong>Minimal uppercase</strong></td><td>Single font, uppercase styling — clean and authoritative</td></tr><tr><td><strong>Minimal basic</strong></td><td>Single font, standard case — versatile, performance-friendly</td></tr><tr><td><strong>Minimal heavy</strong></td><td>Single font, heavier weight — strong, modern</td></tr><tr><td><strong>Classic</strong></td><td>Base + Accent pairing, traditional look — the most versatile starting point</td></tr><tr><td><strong>Avant-garde</strong></td><td>Base + Accent pairing, contemporary and minimal</td></tr><tr><td><strong>Contrast</strong></td><td>Base + Accent pairing, high contrast between body and headings</td></tr><tr><td><strong>Brutalist</strong></td><td>Base + Accent pairing, bold editorial — built for fashion and streetwear</td></tr><tr><td><strong>Duet</strong></td><td>Base + Accent pairing, balanced and harmonious</td></tr><tr><td><strong>Custom</strong></td><td>Full granular control over every individual text style. See Custom typography preset for all settings.</td></tr></tbody></table>

**Swap base and accent fonts** — instantly inverts which font is used for body text and headings. Useful for quickly testing whether a combination reads better reversed.

{% hint style="success" icon="lightbulb" %}
**Tip:**&#x53;tart with a preset that's directionally close to your brand — then switch to **Custom** if you need fine-tuned control over individual text styles.
{% endhint %}

***

### Fonts

Avante supports three font slots:

<figure><img src="/files/U9UfEE1wYv3Wb1CrsYom" alt=""><figcaption></figcaption></figure>

|               | Used for                                      | Available weights       |
| ------------- | --------------------------------------------- | ----------------------- |
| **Base**      | Body text throughout the store                | Regular / Medium / Bold |
| **Accent**    | Headings and titles                           | Regular / Medium / Bold |
| **Secondary** | Third font variation for specific UI elements | —                       |

**The Secondary font: a secret weapon.** Most stores use two fonts. Avante supports a third — a Secondary font you can apply to any single word in a heading by wrapping it in `{curly brackets}`:

```
AVANTE—{BEYOND} THE ORDINARY
```

<figure><img src="/files/2zYJhxIS0lFKUSKWsY8u" alt=""><figcaption></figcaption></figure>

The bracketed word renders in the Secondary font. Use it to add a contrasting accent word, highlight a brand name, or create a typographic logo effect in any text block — without design software or custom code.

{% hint style="danger" %}
**Adding fonts affects store performance.** Each additional font loads extra files — extra fonts can add 0.5–1 second to perceived load time. Stick to 1–2 fonts where possible. See [Shopify's font speed guide](https://help.shopify.com/en/manual/online-store/web-performance/improving-web-performance#fonts).
{% endhint %}

***

### Custom fonts

Upload your own brand fonts to use instead of Shopify's built-in font library.

<figure><img src="/files/HdizkDYmYMZpCCULAi9T" alt=""><figcaption></figcaption></figure>

**Enable custom fonts** — toggle to activate custom font upload.

Once enabled, upload your font files to the theme assets and add `@font-face` declarations following the [Shopify custom fonts guide](https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#custom-fonts).

{% hint style="warning" icon="exclamation" %}
**Supported formats:** WOFF and WOFF2 only.
{% endhint %}

{% hint style="success" icon="lightbulb" %}
**This is a code-level task.** Adding custom fonts requires editing theme files. If you need help, [contact our support team](https://staylime.zendesk.com/hc/en-us/requests/new).
{% endhint %}

See also: [Can I use custom fonts?](/docs/avante-themes/faq/theme-setup/can-i-use-custom-fonts.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/avante-themes/theme-settings/typography.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.