# Typography

The **Umino** theme has a dedicated options panel of its own, which lets you customize the styling of each part of your site to the finest detail. You can set the font style and size for the text.&#x20;

{% hint style="warning" %}
**Note\*: Umino supports** [**Google Font**](https://fonts.google.com/) **,** [**Shopify Font**](https://shopify.dev/themes/architecture/settings/fonts) **and** [**Custom Font**](#3.-custom-font)
{% endhint %}

{% 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 font, kindly follow the steps below:

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

<div><figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/0nY1KKWbmiJd2ITCh3Wi/general-setting-1.jpg" alt=""><figcaption></figcaption></figure> <figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/2q2QljFiyQy2j8bpYBsj/general-setting-2.jpg" alt=""><figcaption></figcaption></figure></div>

### **2. Menu**

In addition to the body text and heading, the menu can also be flexibly configured.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/TjSEvNe5Wp7xIpXqJ9PX/general-setting-4.jpg" alt=""><figcaption></figcaption></figure>

### **3.** 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://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/Yqxi5XHDzbvMk5jKs7y0/general-setting-3.jpg" alt=""><figcaption></figcaption></figure>

### 3. Custom font

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


---

# 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://blueskytechcos-organization.gitbook.io/umino-shopify/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.
