# Typography

{% hint style="info" %}
**Theme settings -> Typography**
{% endhint %}

## Body

&#x20;In this section, you can change the font of the body’s content by choosing the one you like from the **“Base font family”** list:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf2qPrpCDM5UmPfCpCq%2F-Mf2sY3V2Xk-0mk2gzIn%2FScreenshot_16.png?alt=media\&token=15ca9503-80ce-45d8-b7a8-905aa06a752a)

&#x20;If you want to choose a different font for headings, buttons, inputs, or menu, disable the option **“Apply font to all elements ignoring everything except alternate font”**:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf2sq80mj6L-6j3ecdc%2F-Mf2tDRR1yDsnqRlz6Pj%2FScreenshot_17.png?alt=media\&token=49e2b0c7-dba6-4fd9-871d-66e71ca7b6b3)

&#x20;In the dropdown list **“Load additional style”**, you can choose an additional style for the font famil&#x79;**:** Bold, Italic, Bold & italic, Bold italic. Choose “None” if you do not want to apply any style.

&#x20;On the **“Base font size”** scale from 10 to 60 px, you can choose the size of the base font.

## Heading

&#x20;Here you can customize the font for the headings in your store. In the **“Font family”**, you can change the font of all your headings:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf2sq80mj6L-6j3ecdc%2F-Mf2ucrahOd4woQ4aONP%2FScreenshot_18.png?alt=media\&token=7d69c540-39d9-474a-bd6a-acb169d1098d)

&#x20;In the dropdown list **“Load additional style”**, you can choose an additional style for the font famil&#x79;**:** Bold, Italic, Bold & italic, Bold italic. Choose “None” if you do not want to apply any style.

&#x20;On the **“Promo box large text size, h1”** and **“Promo box text size, h2”** scales from 10 to 100 px you can change the size of the text in banners.

&#x20;We chose the Type #1 v1 (Text over the image) for the Promo box (Banner) in the "Layout" block. And changed the h1 to 44 px. And this is what we have got:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf2yZpCbMd7lzkvIu2n%2F-Mf3-9BL67i9UOtU8URq%2FScreenshot_19.png?alt=media\&token=6261ae14-d502-4f8a-abcf-9829beb045c3)

&#x20;And for this example, we chose the Type #1 v17 for the Promo box (Banner) in the "Layout" block:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mg5qMMA814D5IY8Wqx2%2F-Mg5sA59Cz0YcPc57EsR%2FScreenshot_17.png?alt=media\&token=1198ff92-4561-43c4-bcfc-4d56a2aba962)

&#x20;On the **“Page title size, h3”** scale from 10 to 60 px, you can change the size of the title on pages:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf3-Py9x3yIxwO7sYZU%2F-Mf30Z8hHQf3RloczWbK%2FScreenshot_20.png?alt=media\&token=88d9bb07-c7bd-4e08-91b5-0dd2ce577f70)

&#x20;On the **“Section title size, h4”** scale from 10 to 60 px, you can change the size of the section’s title on any page:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf3-Py9x3yIxwO7sYZU%2F-Mf312syVikps_GwxSTP%2F07-06-section-title-size.png?alt=media\&token=e4b333b7-65f8-43a4-b832-bb75bc8f6f66)

&#x20;On the **“Menus title size, h5”** scale from 10 to 60 px you can change the size of the menu’s title on any page:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf3-Py9x3yIxwO7sYZU%2F-Mf30u2h5-28LcwgWpxZ%2F07-06-menu-title-size.png?alt=media\&token=8567d8c7-daed-4130-8649-a754d0e6b19a)

&#x20;On the **“Highlighted text size, h6”** scale from 10 to 60 px you can change the size of the product title and product type in collections:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf3-Py9x3yIxwO7sYZU%2F-Mf33_5f1R2W9StOvd_I%2FScreenshot_21.png?alt=media\&token=50726de6-d8b0-4173-ab15-afeca0131eaa)

## Button & Input

&#x20;In the **“Button font family”**, you can change the font of the buttons:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf6ZYKzO5DYn2SbSvKo%2F-Mf8-KBkkr2-ORwC2PNF%2F07-06-button-font-family.png?alt=media\&token=7fb9d91b-ec7c-4c7d-ba3b-1a34675fb47f)

&#x20;On the **“Button font size”** scale from 10 to 60 px, you can change the size of the button text. On the **“Input font size”** scale from 10 to 60 px, you can change the size of the input, e.g.: placeholder’s text:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf6ZYKzO5DYn2SbSvKo%2F-Mf8-MS-LQ2pqCn9PCQc%2F07-06-input-font-size.png?alt=media\&token=d54c7610-d194-4098-be1f-49ecdee79e01)

## Menu

&#x20; In this section, you can change the font of the menu by simply selecting the proper one from the list in the **“Font family”:**

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mg5h3MwdLpLGPF0Dtp2%2F-Mg5hw4iXkPmn3NMAoR-%2F07-06-menu-font.png?alt=media\&token=e91f9dba-ec94-43ba-be00-afdeb5039a40)

&#x20;On the **“First level font size”** scale from 10 to 60 px, you can change the size of the menu text on the first level:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mg5h3MwdLpLGPF0Dtp2%2F-Mg5hj8Xy5-Bpse83KC6%2F07-06-first-level-font-size.png?alt=media\&token=cd1d6a15-9839-4534-9d3c-68a5245795a2)

&#x20; On the **“List font size”** scale from 10 to 60 px, you can change the size of the font in the menu list:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mg5h3MwdLpLGPF0Dtp2%2F-Mg5i0E22ZgGPNFfD9yC%2F07-06-list-font-size.png?alt=media\&token=2bf213b4-211c-442c-8033-cf15b72c49e5)

&#x20;On the **“Title font size”** scale from 10 to 60 px, you can change the size of the font in the titles of the menu:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mg5h3MwdLpLGPF0Dtp2%2F-Mg5i2UmE4LcBWtOCNSw%2F07-06-title-font-size.png?alt=media\&token=73d3adcd-6090-44af-bba0-7595159360b5)

&#x20;On the **“Mobile menu font size”** scale from 10 to 60 px, you can change the menu font size for the mobile version.

## Alternative font family

&#x20;In this section, you can add the class 'ff-alternative' to any element to apply this font family.

&#x20;You can change the font of the element by choosing the one you like from the **“Font family”** list.

&#x20;In the dropdown list **“Load additional style”**, you can choose an additional style for the font famil&#x79;**:** Bold, Italic, Bold & italic, Bold italic. Choose “None” if you do not want to apply any style.


---

# 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://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/typography.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.
