# Fonts

Select and customize **fonts** used for text in Studio sections. Font settings are available for headings, body, subheadings, badges, and prices.

{% hint style="info" %}
All fonts are provided by Shopify's font picker. Learn more about [fonts supported by Shopify](https://shopify.dev/themes/architecture/settings/fonts#available-fonts).
{% endhint %}

***

In the theme editor, click the **Fonts** block under **Section Studio** • **Global styles**

### Headings

<table data-header-hidden><thead><tr><th width="239.18853759765625" valign="top">Setting</th><th valign="top">Options</th><th data-hidden></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top"><mark style="color:$info;">Select font for all headings.</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Base font size</mark></td><td valign="top"><mark style="color:$info;">16 - 80px</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Line height</mark></td><td valign="top"><mark style="color:$info;">80 - 150%</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Letter spacing</mark></td><td valign="top"><mark style="color:$info;">80 - 150%</mark></td><td>Use the slider to increase or decrease space between letters.</td></tr><tr><td valign="top"><mark style="color:blue;">Uppercase</mark></td><td valign="top"><mark style="color:$info;">Display headings in all uppercase letters.</mark></td><td>Display all headings in uppercase letters. Toggle off to use the casing of the text as entered in the heading fields.</td></tr><tr><td valign="top"><mark style="color:blue;">Mobile size scale</mark></td><td valign="top"><mark style="color:$info;">50 - 100%</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Desktop scale ratio</mark></td><td valign="top"><mark style="color:$info;">100 - 150%</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile scale ratio</mark></td><td valign="top"><mark style="color:$info;">100 - 150%</mark></td><td></td></tr></tbody></table>

### Body

<table data-header-hidden><thead><tr><th width="240.19195556640625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top"><mark style="color:$info;">Select font for all body text.</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Base font size</mark></td><td valign="top"><mark style="color:$info;">14 - 20 px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Line height</mark></td><td valign="top"><mark style="color:$info;">100 - 160 %</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Letter spacing</mark></td><td valign="top"><mark style="color:$info;">90 - 120 %</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile size scale</mark></td><td valign="top"><mark style="color:$info;">50 - 100 %</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Desktop scale ratio</mark></td><td valign="top"><mark style="color:$info;">100 - 150 %</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile scale ratio</mark></td><td valign="top"><mark style="color:$info;">100 - 150 %</mark></td></tr></tbody></table>

### Subheadings

<table data-header-hidden><thead><tr><th width="240.27978515625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top">Apply <strong>Heading</strong> or <strong>Body</strong> font to all subheadings.</td></tr></tbody></table>

### Badges

<table data-header-hidden><thead><tr><th width="240.1263427734375" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top">Apply <strong>Heading</strong> or <strong>Body</strong> font to all badge text.</td></tr></tbody></table>

### Prices

<table data-header-hidden><thead><tr><th width="239.84075927734375" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top">Apply <strong>Heading</strong> or <strong>Body</strong> font to all product prices.</td></tr></tbody></table>

### Buttons

Font settings for **buttons** are found in **Global styles > Buttons.**

{% content-ref url="/pages/JkDpkhqTFowWAevBlQm1" %}
[Buttons](/section-studio/sections/global-styles/buttons.md)
{% endcontent-ref %}


---

# Agent Instructions: 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:

```
GET https://help.fluorescent.co/section-studio/sections/global-styles/fonts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.