# Typography

<Embed url="https://youtu.be/OcrjPY7c6bA" />

<Hint type="success">

Steps

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

</Hint>

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 type="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.

</Hint>

<Hint type="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](https://cdn.shopify.com/s/files/1/0561/2742/2636/files/Jost-Regular.ttf?v=1618297125@400)

</Hint>

<Tabs>
<Tab title="Font library">

![image](https://docs-assets.foxecom.app/minimog-theme/image_svc9mP0H.png)

</Tab>

<Tab title="Custom font">

![image](https://docs-assets.foxecom.app/minimog-theme/image_Ol2Wgrz6.png)

</Tab>
</Tabs>

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

<Tabs>
<Tab title="Body text">

![image](https://docs-assets.foxecom.app/minimog-theme/image_3SyDQKQA.png)

</Tab>

<Tab title="Headings">

![image](https://docs-assets.foxecom.app/minimog-theme/image_2uUtVql0.png)

</Tab>
</Tabs>

<Hint type="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 😄

</Hint>

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

![image](https://docs-assets.foxecom.app/minimog-theme/image_nopDoysu.png)

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

![image](https://docs-assets.foxecom.app/minimog-theme/image_K461ddE3.png)

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

![image](https://docs-assets.foxecom.app/minimog-theme/image_87hgnFX6.png)

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

![image](https://docs-assets.foxecom.app/minimog-theme/image_jmk9Ln5h.png)