# 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="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FTI1hIrVa94yrbvTvQkVk%2FScreenshot_135.png?alt=media&#x26;token=0acce32d-0e4b-42cf-9382-7231c58e9dcc" 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="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FsBQApg7CjJQlSNXm3H2S%2FScreenshot_136.png?alt=media&#x26;token=82689f7d-cab7-4829-a0b7-0c9dfc669d4c" alt=""><figcaption></figcaption></figure> <figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FyFavtRsELO7D3DGZ47MO%2FScreenshot_137.png?alt=media&#x26;token=ec205e2e-7a54-4c18-854f-d1d1a4a54ffb" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Custom font" %}

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FAQMxLQYMesv9Rq56gwnU%2FScreenshot_142.png?alt=media&#x26;token=af33ea29-642c-4f0f-b679-34d423452a59" 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="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FadPGH0gtFyZPAvJqBuyH%2FScreenshot_138.png?alt=media&#x26;token=d056b969-86fe-479d-af7e-22c729290ced" 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="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FfgZSJrEEiKDUGxQBUBeT%2FScreenshot_139.png?alt=media&#x26;token=cec72662-0398-4c06-9e86-8bf085027c24" 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="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FtVV9ukwQJSCw4wn95bwk%2FScreenshot_140.png?alt=media&#x26;token=6a602841-4a16-4f68-b59c-29992645eb01" alt=""><figcaption></figcaption></figure>

## Buttons settings

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FlGdFbh0hNWvFS1mZ781w%2FScreenshot_141.png?alt=media&#x26;token=ca6afe12-e776-4a18-8fd7-d5a930390646" 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> |

## Video Tutorials

{% embed url="<https://www.youtube.com/watch?index=4&list=PLWCiWoEvn91jNQMp4Ts9ECrHUw6JWiqWs&v=g1rUaaHkuzU>" %}