# Typography

{% hint style="success" %}
Steps

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

Typography is considered one of the essential components that impact the website's look and feel. It contains the following elements.

### 1. **Body text and headings**

You can either choose the existing fonts from the library or custom fonts. For the custom front, kindly follow the steps below:

{% hint style="success" %}
Allow multiple links, each link in a new line. Please upload the font to [Shopify files](https://minimog-documentation.myshopify.com/admin/settings/files) and paste the link into the blank field. These formats TTF, OTF, WOFF & WOFF2 are supported.
{% endhint %}

{% hint style="info" %}
Follow the format: Link\_to\_font\@font\_weight when pasting in the field. E.g: <https://cdn.shopify.com/s/files/1/0561/2742/2636/files/Jost-Regular.ttf?v=1618297125@400>
{% endhint %}

{% tabs %}
{% tab title="Font library" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FLnqlnfbqk8w2IDWzQaHE%2Fimage.png?alt=media&#x26;token=f244a410-7d74-4dab-abce-f0444fe53b88" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Custom font" %}
![](https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/fU5bv4MSPXTLqoYqUc8x/Screen%20Shot%202021-10-21%20at%2021.36.15.png)
{% endtab %}
{% endtabs %}

Elements related to the font such as spacing, height, weight, etc. are adjustable

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FJe6YwcspuHKfj6i5UgEX%2Fimage.png?alt=media&#x26;token=213a0511-77cd-429f-bad0-185cd45d9c21" alt=""><figcaption></figcaption></figure>

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FGWLmngZWenuoDQKPtcYx%2Fimage.png?alt=media&#x26;token=aa287175-73e9-4417-96d0-8ad19915bafa" alt=""><figcaption></figcaption></figure>

### 2. Buttons

The button font is inherited from the body text. Use the slider to modify border width and height, font size, etc. You can choose to display the button text in uppercase style.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F6BNPpWng0IfgilHuu1xQ%2Fimage.png?alt=media&#x26;token=3fff77c8-a969-4b04-bfcf-c3757d4860df" alt=""><figcaption></figcaption></figure>

### 3. Input

Change thichness and corner radius of input

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FgluA16D15Kes8BlIL2zC%2Fimage.png?alt=media&#x26;token=2a1c5023-b376-423a-8d57-9ce30117e4e5" alt=""><figcaption></figcaption></figure>