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

# Typography

{% embed url="<https://youtu.be/OcrjPY7c6bA>" %}

{% 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.

## **Body text and Headings**

You can either choose the existing fonts from the library or custom fonts.&#x20;

For the custom front, ollow the steps below:

{% hint style="success" %}
Steps

1. Allow multiple links, each link in a new line.&#x20;
2. Upload the font to [Shopify files](https://minimog-documentation.myshopify.com/admin/settings/files) and paste the link into the blank field.&#x20;

Recommended formats: TTF, OTF, WOFF, and WOFF2.
{% endhint %}

{% hint style="info" %}
When pasting in the field, follow this format: ***Link\_to\_font\@font\_weight***

For ex:&#x20;

<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="/files/svc9mP0H1MOhmsrow8yd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Custom font" %}

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

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

{% tabs %}
{% tab title="Body text" %}

<figure><img src="/files/3SyDQKQAl2hVL5Tc3LE7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Headings" %}

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

{% hint style="info" %}
In Minimog v3.0.0 onwards, some text settings are removed to maintain the consistency of the theme design.&#x20;

If you want to adjust anything related but can't find it in Theme settings, let us know via [live chat](https://foxkit.app/) and we will be happy to assist :smile:
{% endhint %}

## Product card title

The **Product card title** settings control how product names appear in product grids and collection pages.

Available settings include:

* Font size
* Font family
* Font weight
* Letter spacing
* Uppercase product title toggle

This allows better control over how product titles appear throughout your store.

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

## Navigation

The **Navigation** settings control the appearance of menu and navigation text throughout the store.

Available settings include:

* Font size
* Font family
* Font weight
* Letter spacing

These settings help you fine-tune the appearance of menu and navigation items.

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

## Buttons

The button font is inherited from the **Body text** settings.

You can customize the following button styles:

* Uppercase Text Label
* Font Size
* Letter Spacing
* Border Width
* Border Radius
* Line Height
* Font Weight

<figure><img src="/files/87hgnFX62fuAFjY7o3He" alt=""><figcaption></figcaption></figure>

## Inputs

The **Inputs** settings let you customize the appearance of input fields (such as search bars, contact forms, newsletter fields,...) on your site

* **Thickness**: Adjusts the border thickness of input fields. Use the slider or enter a value in pixels (e.g., 1 px) to control how bold the border appears.
* **Corner Radius**: Controls the roundness of input field corners. Higher values (e.g., 5 px) make the corners more rounded, while lower values keep them more square.

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

<figure><img src="/files/SX65AqudlKxDPLIUfi25" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_minimog&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>