# 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://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/zrT5HHVNqpqHMVhnXPDO/tyepography.png" 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://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/VuPobSzpQgujmrynkaGa/body_library_font.png" alt=""><figcaption></figcaption></figure> <figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/GWww3KVcGv4LnXnxPlSH/body_library_font_2.png" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Custom font" %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/Ahupeoxa9e8Hf6KbGUSf/custom_font_1.png" 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://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/yfcCpoWtEm83zS10oEjY/fonts_upload.png" 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://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/uCiuzIN3KaRCeA5zdDcy/put_url.png" 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://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/R0BK6SXmaJYlaRubZMDc/heading_font.png" alt=""><figcaption></figcaption></figure>

## Buttons settings

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/qbqFPgPMn5nOjm9cj5iV/button_typo.png" 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> |
