> For the complete documentation index, see [llms.txt](https://themihub.gitbook.io/isotech-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themihub.gitbook.io/isotech-shopify-theme/theme-settings/typography.md).

# 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/7Hg8cYZOt66iWZS4tTz7/blobs/ietVfZREcYzjM3JA8O5P/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/7Hg8cYZOt66iWZS4tTz7/blobs/Y7q0jTlUoZ3OqlqhkIut/body_library_font.png" alt=""><figcaption></figcaption></figure> <figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/5HBYkkjV0Dv6EDfYAwZk/body_library_font_2.png" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Custom font" %}

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/RZjBNoFsz0FqSqosUzAR/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/7Hg8cYZOt66iWZS4tTz7/blobs/DwKDCEw8tQaYO9WjtJ6b/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/7Hg8cYZOt66iWZS4tTz7/blobs/keP6J9YxF6rSWssifcvo/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/7Hg8cYZOt66iWZS4tTz7/blobs/O9YAiWxXDMqTTd5AUjd4/heading_font.png" alt=""><figcaption></figcaption></figure>

## Buttons settings

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/EJ51Y0jMQvr2G73fLhCv/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> |