> 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/custom-typography-preset.md).

# Custom typography preset

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

{% hint style="success" icon="lightbulb" %}
Available only when **Custom** is selected in **Theme settings → Typography → Typography preset**.
{% endhint %}

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

The built-in presets cover most brands. Custom preset is for when you need to go further — a different font per heading level, precise letter-spacing for a luxury feel, or responsive sizes that are tuned independently for desktop and mobile.

***

### When to use Custom preset

{% columns %}
{% column %}

> **Mix fonts by heading level**\
> Use Accent for H1, Base for H2–H3 for contrast.

> **Tune letter-spacing**\
> Add spacing for a luxury or editorial feel.
> {% endcolumn %}

{% column %}

> **Set responsive sizes per element**\
> Control desktop and mobile sizes independently.

> **Use uppercase selectively**\
> Apply it only to labels or headings — not everywhere.
> {% endcolumn %}
> {% endcolumns %}

***

### Text styles

<figure><img src="/files/0bqiizne171YkKIOLKaY" alt=""><figcaption></figcaption></figure>

Custom preset exposes 9 individual text styles. For each you can set:

<table data-search="false"><thead><tr><th>Control</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Font</strong></td><td>Base, Accent, or Secondary</td></tr><tr><td><strong>Case</strong></td><td>None / Uppercase / Capitalize</td></tr><tr><td><strong>Weight</strong></td><td>Regular / Medium / Bold</td></tr><tr><td><strong>Line height</strong></td><td>Controls vertical spacing between lines</td></tr><tr><td><strong>Desktop base size</strong></td><td>Font size on desktop</td></tr><tr><td><strong>Mobile base size</strong></td><td>Font size on mobile (set independently)</td></tr><tr><td><strong>Letter-spacing</strong></td><td>Horizontal spacing between characters</td></tr></tbody></table>

The 9 styles and where they apply:

<table data-search="false"><thead><tr><th>Style</th><th>Used for</th></tr></thead><tbody><tr><td><strong>Heading XL</strong></td><td>Page hero titles, large banner headings</td></tr><tr><td><strong>Heading L</strong></td><td>Section headings</td></tr><tr><td><strong>Heading M</strong></td><td>Subsection headings, product titles</td></tr><tr><td><strong>Heading S</strong></td><td>Card titles, smaller headings</td></tr><tr><td><strong>Heading XS</strong></td><td>Labels styled as headings, small titles</td></tr><tr><td><strong>Body L</strong></td><td>Large body text, intros</td></tr><tr><td><strong>Body M</strong></td><td>Standard body text, product descriptions</td></tr><tr><td><strong>Body S</strong></td><td>Small body text, footnotes, captions</td></tr><tr><td><strong>Label</strong></td><td>Badges, tags, UI labels</td></tr></tbody></table>

***

### UI element assignments

Beyond the 9 text styles, Custom preset lets you assign any style to specific UI components:

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

* **Label** — assign a text style to UI labels across the store
* **Buttons** — choose which text style applies to button labels
* **Product cards** — control the text style on product card titles and labels
* **Collection cards** — same for collection cards
* **Navigation** — assign a text style to menu items

{% hint style="success" icon="lightbulb" %}
**Tip:** Assign the **Secondary font** as a third independent typeface for specific UI elements like buttons or labels. Set it first in **Theme settings → Typography → Secondary**.
{% endhint %}

***

{% hint style="danger" %}
**Fonts not applying in Safari or Firefox after updating to v14?** This is a known CSS bug in the v14 release. See [Fonts not displaying in Safari or Firefox](/docs/avante-themes/faq/theme-setup/fonts-not-displaying-in-safari-or-firefox.md) for the fix.
{% 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 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/custom-typography-preset.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.