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

# Typography

**Typography** allows setting the font elements such as font, font size, and alignment of texts for the site.

{% hint style="success" %}
**Steps:**

1. From your Shopify admin, go to **Online Store -> Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme Settings -> Typography**.
   {% endhint %}

<figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/w6D4m8QU96kdaqOoEIwM/6.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Optimize your website's performance by utilizing shopify fonts! Selecting a different font can affect the speed of your store. [<mark style="color:orange;">Learn more about system fonts.</mark>](https://help.shopify.com/en/manual/online-store/os/store-speed/improving-speed#fonts)
{% endhint %}

## How to setup Google Font?

You can use hundreds of free, open-source fonts available through [<mark style="color:orange;">Google Fonts</mark>](http://fonts.google.com/).

1. Search font.
2. Copy name of font which you choose.
3. At **Font source** setting -> select **Google fonts** option.
4. Paste text which you have copied to **"Google font name"** setting.

<figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/keHFtF5TL5tiY530oS9j/7.jpg" alt=""><figcaption></figcaption></figure>

### How to setup Shopify Font? <a href="#how-to-setup-shopify-font" id="how-to-setup-shopify-font"></a>

Shopify's font library is a [<mark style="color:orange;">collection of fonts</mark>](https://shopify.dev/themes/architecture/settings/fonts#available-fonts) that includes system fonts, a selection of Google fonts, and licensed fonts from [<mark style="color:orange;">Monotype</mark>](https://www.monotype.com/). These fonts are free to use on all Shopify online stores, and are provided in both [<mark style="color:orange;">WOFF</mark>](https://caniuse.com/#feat=woff) and [<mark style="color:orange;">WOFF2</mark>](https://caniuse.com/#feat=woff2) formats.

1. At **Font source** setting -> select **Shopify fonts** option.
2. Click the **Change** button in the **Shopify font** setting to choose the font you want.

<figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/rSUFLRaRYtD1KZNAJmoh/8.jpg" alt=""><figcaption></figcaption></figure>

**Body font**

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p></p><p>Select a font family to apply to the body text:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the body text ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p></p><p>Set the font weight to apply to the body text:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the body text.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the body text.</td></tr></tbody></table>

**Heading font**

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p></p><p>Select a font family to apply to the body text:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the body text ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p></p><p>Set the font weight to apply to the body text:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the body text.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the body text.</td></tr><tr><td>Text Transform</td><td>Set the font style on heading, titles to be either normal, italic or oblique.</td></tr></tbody></table>

**Navigation font**

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p></p><p>Select a font family to apply to the body text:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr></tbody></table>

**Button font**

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p></p><p>Select a font family to apply to the body text:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the body text ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p></p><p>Set the font weight to apply to the body text:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the body text.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the body text.</td></tr><tr><td>Text Transform</td><td>Set the font style on heading, titles to be either normal, italic or oblique.</td></tr></tbody></table>

**Product Badge font**

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p></p><p>Select a font family to apply to the body text:</p><ul><li><strong>Font family #1</strong></li><li><strong>Font family #2</strong></li></ul></td></tr><tr><td>Font size</td><td>Set the font size to apply to the body text ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p></p><p>Set the font weight to apply to the body text:</p><ul><li><strong>Normal</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the body text.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the body text.</td></tr><tr><td>Text Transform</td><td>Set the font style on heading, titles to be either normal, italic or oblique.</td></tr></tbody></table>