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

# Typography

In the "Typography", you can apply font settings to headings, body, navigation menus, and buttons.

The "[<mark style="color:blue;">Headings</mark>](#headings)", "[<mark style="color:blue;">Buttons</mark>](#buttons)", and "[<mark style="color:blue;">Menu</mark>](#menu)" subsections provide the following settings:

**Load assigned font**\
Display the source selector and set a different font for headings.

**Assigned font**\
Apply the settings in the "[<mark style="color:blue;">First custom font - Third custom font</mark>](#first-custom-font-third-custom-font)". Use two scenarios to configure fonts in your store:

* **"Shopify"**. Displays the [<mark style="color:blue;">Shopify Font library</mark>](https://shopify.dev/tutorials/develop-theme-fonts) fonts.
* **"Custom fonts"**. Lets you configure the custom fonts in the "[<mark style="color:blue;">First custom font - Third custom font</mark>](#first-custom-font-third-custom-font)" groups.

#### Scenario 1

{% hint style="success" %}
By selecting the **"Shopify"** option, the following options are available for configuration:
{% endhint %}

**Font**\
To use a different font, press the source selector and choose the desired one from the suggested list.

#### Scenario 2

{% hint style="success" %}
If you use one of the **"Custom fonts"** options, the following settings are available for configuration:
{% endhint %}

**Weight and style**\
Use the drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.

***

### Body

Settings from the current group will be applied to all theme elements across the entire store if a specific font is not set in the "[<mark style="color:blue;">Headings</mark>](#headings)", "[<mark style="color:blue;">Buttons</mark>](#buttons)", and "[<mark style="color:blue;">Menu</mark>](#menu)" setting groups.

**Assigned font**\
Apply the settings in the "[<mark style="color:blue;">First custom font - Third custom font</mark>](#first-custom-font-third-custom-font)". Use two scenarios to configure fonts in your store:

* **"Shopify"**. Displays the [<mark style="color:blue;">Shopify Font library</mark>](https://shopify.dev/tutorials/develop-theme-fonts) fonts.
* **"Custom fonts"**. Lets you configure the custom fonts in the "[<mark style="color:blue;">First custom font - Third custom font</mark>](#first-custom-font-third-custom-font)" groups.

#### Scenario 1

{% hint style="success" %}
By selecting the **"Shopify"** option, the following settings are available for configuration:
{% endhint %}

**Font**\
To use a different font, press the source selector and choose the desired one from the suggested list.

Enable the desired option to apply the font changes. Use a single parameter from the list:

* Regular 400
* Bold 700
* Italic
* Bold 700 Italic

#### Scenario 2

{% hint style="success" %}
If you use one of the **"Custom fonts"** options, the following settings are available for configuration:
{% endhint %}

**Weight and style**\
Use the drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.

{% hint style="success" %}
The options described below are available in both scenarios:
{% endhint %}

**Font size scale**\
Adjust the text size from 60% to 130% using five intermediate steps.

**Show detailed settings**\
Tick the option to show additional font settings.

**Line height scale**\
Change the line spacing between 30% and 200%.

**Letter spacing scale**\
Determine the letter spacing using a scale ranging from 50% to 250%.

***

### Headings

These settings apply to all headings in theme sections and blocks, page titles of the entire store, product titles on product pages, the [<mark style="color:blue;">Sticky panel</mark>](/unicorn-shopify-theme/page-categories/products/product-details/sticky-panel.md), and the "[<mark style="color:blue;">Featured product</mark>](/unicorn-shopify-theme/dynamic-theme-sections/featured-product.md)" section.

{% hint style="success" %}
The options described below are available in both scenarios:
{% endhint %}

**Uppercase**\
Capitalize headings in the sections and blocks of the entire store.

**Font size scale**\
Adjust the text size from 60% to 150% with five intermediate steps.

**Show detailed settings**\
Tick the option to show additional font settings.

**Line height scale**\
Change the line spacing between 30% and 200%.

**Letter spacing scale**\
Determine the letter spacing using a scale ranging from 50% to 250%.

**Customize all sizes**\
Turn on the option to display the additional settings for customizing tags across your entire store.

**H1 size - H6 size**\
Use the provided pixel-based scale values to adjust the font sizes of the H1, H2, H3, H4, H5, and H6 headings.

**H1 line height scale - H6 line height scale**\
Adjust the line spacing for each heading tag (H1, H2, H3, H4, H5, and H6) from 30% to 200% using the provided scales.

***

### Buttons

The font is applied to all buttons in a store, except for the accelerated checkout buttons.

{% hint style="success" %}
The options described below are available in both scenarios:
{% endhint %}

**Uppercase**\
Enable the option to capitalize the button's text.

**Font size scale**\
Increase the text size from 60% to 150% in five incremental steps.

**Show detailed settings**\
Tick the option to show additional font settings.

**Letter spacing scale**\
Determine the letter spacing using a scale ranging from 50% to 350%.

***

### Menu

{% hint style="success" %}
The options described below are available in both scenarios:
{% endhint %}

**Uppercase**\
Enable the option to capitalize the button's text.

**Font size scale**\
Increase the text size from 60% to 150% in five incremental steps.

**Show detailed settings**\
Tick the option to show additional font settings.

**Letter spacing scale**\
Determine the letter spacing using a scale ranging from 50% to 250%.

***

### First custom font - Third custom font

{% hint style="warning" %}
**Note!** These are advanced settings intended for developers.
{% endhint %}

**Source**\
Set one of the options:

* **"None"**. Disables custom fonts.
* **"Google fonts"**. This option links to Google fonts and reveals related options. The list of Google fonts can be checked [<mark style="color:blue;">here</mark>](https://fonts.google.com/).

**Font link tags**\
Use the input field to embed code.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FRkeNXAv4UKxpgVl6dIqO%2Fgoogle%20fonts_code.png?alt=media&amp;token=5a2955ff-71e8-4c98-82cb-71ca04c9ef84" alt=""><figcaption></figcaption></figure>

**Font family**\
Place the font family name in the field.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FfFzkhs9shbcoMzBI8n6X%2Fgoogle%20fonts_font%20family.png?alt=media&amp;token=5679066f-d103-4dda-9dcf-37d768e45abe" alt=""><figcaption></figcaption></figure>

**Weight and style**\
Use the drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.

* **"External"**. Select the option to add your custom font family.

**CSS rule**\
Enter valid CSS rules to customize the appearance and behavior of the element beyond preset options. Check the recommendations in the following [<mark style="color:blue;">documentation</mark>](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face?utm_source=chatgpt.com).

The underlined lines can be substituted with the address of the downloaded font from *"Files"* in Shopify.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FSn7ysxyqd1ec4n8M3moy%2Ffonts%20external_css%20rules.png?alt=media&amp;token=69a1dcf4-471d-4406-8dd5-58e3de00ceda" alt="" width="192"><figcaption></figcaption></figure>

**Font family**\
Paste the font family name you added under "CSS rules" (@font-family).

Example: "Open Sans".

**Weight and style**\
Use the drop-down to control the visual appearance of text by adjusting its thickness and formatting characteristics.

* **"Shopify"**. Use the **"Font"** selector to set a desired font using the [<mark style="color:blue;">Shopify Font library</mark>](https://shopify.dev/tutorials/develop-theme-fonts).

{% hint style="success" %}
The settings described below are available for all options.
{% endhint %}

**Target CSS classes**\
Specify which CSS classes the font should be applied to. To assign a font to a specific element, find the desired element on the website and assign this class to it using the code editor.

**Show detailed settings**\
Tick the option to show additional font settings.

**Font size**\
Use the scale to adjust the text size from 10 to 60 pixels.

**Line height scale**\
Change the line spacing between 30% and 200%.

**Letter spacing scale**\
Determine the letter spacing using a scale ranging from 50% to 250%.

**Uppercase**\
Enable the option to capitalize text.