> 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

Use default or custom font for the website

{% 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FqUF5A1ueN3l3Ju8ehjDz%2Fimage.png?alt=media&amp;token=32499806-73f5-462e-986e-cc90094ff2c4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Custom font" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FmgI3ixjwaxYKnwq1msKW%2Fimage.png?alt=media&amp;token=e5ab723c-05e8-4425-b02b-1cf7860d22e8" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FpRBPg9ou3wdOFjfNKb11%2Fimage.png?alt=media&amp;token=7f268f87-c9c7-4f65-bd5a-36917cd62602" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Headings" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F1OoRv92FO3HZICkjTr6S%2Fimage.png?alt=media&amp;token=6407359c-fdb6-48bd-a653-1d215a8b7046" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FQQyEB8NaZ6F4ynY9w8UK%2Fimage.png?alt=media&amp;token=58de8270-2145-4f89-a4ca-84426843b12b" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fy7qCf8R8oKZEUQjKT9sx%2Fimage.png?alt=media&amp;token=c0ec74e4-9ea6-4eb2-a02d-8f647ece3605" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F7GcBur5Qq0GWczwC6RAM%2Fimage.png?alt=media&amp;token=e67a9c68-9c03-4cb6-8c49-96af1f571f1d" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FylSMK9yNOFp86bn2sTo3%2Fimage.png?alt=media&amp;token=8e57ae37-ec2c-446f-871c-fa71b3f8e1d5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FGeIkBQFI4LGjyGqhvlet%2Flivechat883x471%20(1).png?alt=media&amp;token=9168d917-bd02-4cd6-a7af-eb9896c7a5ef" 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>