# Typography

{% hint style="success" %}
**Take the following steps:**

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Typography settings**
3. Make the necessary adjustments.
4. **Save**
   {% endhint %}

<figure><img src="/files/5SXCdSMbj2CTbCP4waQA" alt=""><figcaption></figcaption></figure>

> **The importance of typography cannot be overstated when it comes to influencing the overall appearance and impression of a website. In this article, we will guide you through the process of modifying the typography of your online store.**

## Body font

You have **two options** when it comes to selecting fonts for your website: utilizing the pre-existing fonts available in the **library** or using **custom fonts**. If you prefer to use custom fonts, please follow the steps outlined below:

#### Custom fonts guideline

{% hint style="success" %}
Allow multiple links, each on a separate line. Please upload the font to Shopify files and copy and paste the link into the empty field. These formats **TTF, OTF, WOFF & WOFF2** are supported.
{% endhint %}

{% hint style="info" %}
**Font\_URL\@font\_weight\&Font\_URL\@font\_weight (**<mark style="color:red;">**You must follow this format**</mark>**)**

<https://cdn.shopify.com/s/files/1/0029/1101/0929/files/Jost-Regular.ttf?v=1687278895>@400&<https://cdn.shopify.com/s/files/1/0029/1101/0929/files/Jost-Bold.ttf?v=1687279173>@700
{% endhint %}

{% tabs %}
{% tab title="Library font" %}

<div><figure><img src="/files/adM7euO21ea0zI1GC9zR" alt=""><figcaption></figcaption></figure> <figure><img src="/files/MWnVEaqbmvrLxXC37LLl" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Custom font" %}

<figure><img src="/files/g0nClO3Cxoe9s5NfbkpT" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Custom font settings

| Settings             | Description                                                                                                                                                                                                                                                                                                                                                                                                   |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Use custom font**  | You need to enable it to use custom font                                                                                                                                                                                                                                                                                                                                                                      |
| **Font URL**         | <ol><li><strong>You need to first upload fonts to the Shopify file</strong></li></ol><p><img src="/files/N7aXWOc0uQhqYVdspnZg" alt="" data-size="original"><br><br>2. Following the format, "<strong>Font\_URL\@font\_weight\&Font\_URL\@font\_weight"</strong> Put the URL in the "<strong>Font URL</strong>" field</p><p></p><p><img src="/files/PAHHDGRMD5oaZB60A7Q8" alt="" data-size="original"><br></p> |
| **Body font weight** | You can change the font weight of the custom font for the body text.                                                                                                                                                                                                                                                                                                                                          |
| **Body font size**   | You can increase/decrease the font size using percentages.                                                                                                                                                                                                                                                                                                                                                    |
| **Letter spacing**   | You can add Letter spacing for the body text                                                                                                                                                                                                                                                                                                                                                                  |

## Headings font

{% hint style="success" %}
**Follow the instructions**

**Similar to the body font**, you can include a heading library/custom font, as well as font size, font weight, and letter spacing.
{% endhint %}

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

## Buttons settings

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

| Settings             | Description                                                                                                                                                             |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button font size** | You can increase/decrease the font size using percentages.                                                                                                              |
| **Border Width**     | You can change border width                                                                                                                                             |
| **Border Radius**    | You can change border for all the buttons                                                                                                                               |
| **Letter spacing**   | You can add a letter spacing for all the buttons                                                                                                                        |
| **Text transform**   | <p>You can text transform the following options,<br>"<strong>Default</strong>, <strong>Uppercase</strong>, <strong>Lowercase</strong>, <strong>Capitalize</strong>"</p> |


---

# 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://themihub.gitbook.io/isotech-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.