# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/minimog-theme/theme-settings/typography.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.