> 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

Select fonts and typography presets that define your store's visual voice — from minimal single-font layouts to expressive multi-font pairings.

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

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FjlJlIrc6zZKhYXOnICoW%2FGroup%209.jpg?alt=media&amp;token=1acb110d-5ea9-42c9-bd86-e2c388a2ffd6" 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

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 %}

***

### Resizing all text at once

A preset fixes the relationship between your text styles — headings, body copy, labels and buttons all scale together. If the whole thing reads too small on a laptop or too large on a phone, you do not have to rebuild it style by style.

**Desktop font size scale** and **Mobile font size scale** stretch every text style in the theme at once, from **50%** to **130%** of the preset's sizes, in 5% steps. Desktop and mobile are independent, so you can keep roomy headings on a wide screen and tighten them up on a phone.

{% hint style="info" %}
The two sliders only appear while a ready-made preset is selected. Switch **Typography preset** to **Custom** and they disappear, because Custom already gives you a size for each individual text style.
{% endhint %}

***

### Fonts

Avante supports three font slots:

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2Fdc8ZyXrOPukjsasfBJqy%2FGroup%2014%20(36).png?alt=media&amp;token=0bb1ad1d-24a1-4bf8-a962-1b2d19376d39" alt=""><figcaption></figcaption></figure>

<table data-search="false"><thead><tr><th>Slot</th><th>Used for</th></tr></thead><tbody><tr><td><strong>Base</strong></td><td>Body text throughout the store</td></tr><tr><td><strong>Accent</strong></td><td>Headings and titles</td></tr><tr><td><strong>Secondary</strong></td><td>Third font variation for specific UI elements</td></tr></tbody></table>

Each slot uses Shopify's own font picker, so the weights and styles you can choose are whatever the font family itself ships with — Avante does not limit them.

{% hint style="warning" %}
**Base icon weight and Accent icon weight are not font weights.** They sit right under the Base and Accent font pickers, which makes them easy to misread. Each one controls how thick the theme's icons are drawn — **Regular**, **Medium** or **Bold** — so you can match the icon line weight to how heavy your text looks. Changing them has no effect on the fonts themselves.
{% endhint %}

**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="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FCEVLiBcROhaMxkFXpYUO%2FGroup%2014%20(37).png?alt=media&amp;token=ee9b0f02-91ae-4202-b647-699043d264dd" 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

You can use your own brand fonts instead of Shopify's built-in font library — including Adobe Fonts (Typekit).

This is a code-level task rather than a setting: you upload the font files to the theme assets, declare them with `@font-face`, and point the theme's text styles at them. The **Enable custom fonts** checkbox in this group is not the switch that makes that happen — it is the theme files that do the work.

{% hint style="success" icon="lightbulb" %}
**Follow the step-by-step guide.** [**Can I use custom fonts?**](/docs/avante-themes/faq/theme-setup/can-i-use-custom-fonts.md) walks through the whole process, including Adobe Fonts.
{% endhint %}

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


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.