# Typography

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

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

<figure><img src="/files/A4fIGtrJWTDPepk0z6m0" alt="" width="266"><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. [Learn more about system fonts.](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 [Google Fonts](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.

<div><figure><img src="/files/uPNQu5wok3r6C3J3vqMA" alt="" width="267"><figcaption></figcaption></figure> <figure><img src="/files/ImU5GRwSwUqNrvZVdNrc" alt="" width="267"><figcaption></figcaption></figure></div>

## How to setup Shopify Font?

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

<div><figure><img src="/files/5lh7tbMMCYA32tMEn0Am" alt="" width="267"><figcaption></figcaption></figure> <figure><img src="/files/iviurE7pa45tJsGe2zTV" alt="" width="263"><figcaption></figcaption></figure></div>

## <mark style="color:blue;">**Body font**</mark>

<table><thead><tr><th width="237">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><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>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>

## <mark style="color:blue;">**Heading font**</mark>

<table><thead><tr><th width="239">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to headings and titles:</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 headings and titles ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to headings and titles:</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>Font style</td><td><p>Set the font style for headings and titles:</p><ul><li><strong>Normal</strong></li><li><strong>Italic</strong></li><li><strong>Oblique</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the text of headings and titles:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to headings and titles.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to headings and titles.</td></tr><tr><td>Border height</td><td>Set the height of the border (underline) for headings and titles.</td></tr></tbody></table>

## <mark style="color:blue;">**Navigation font**</mark>

**Menu level 1**

<table><thead><tr><th width="244">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Menu level 1</strong>:</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 text of <strong>Menu level 1</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Menu level 1</strong>:</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>Text style</td><td><p>Specifies how to capitalize the text of <strong>Menu level 1</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Menu level 1</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Menu level 1</strong>.</td></tr></tbody></table>

**Menu level 2**

<table><thead><tr><th width="245">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Menu level 2</strong>:</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 text of <strong>Menu level 2</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Menu level 2</strong>:</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>Text style</td><td><p>Specifies how to capitalize the text of <strong>Menu level 2</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Menu level 2</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Menu level 2.</strong></td></tr></tbody></table>

**Menu level 3**

<table><thead><tr><th width="247">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Menu level 3</strong>:</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 text of <strong>Menu level 3</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Menu level 3</strong>:</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>Text style</td><td><p>Specifies how to capitalize the text of <strong>Menu level 3</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Menu level 3</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Menu level 3</strong>.</td></tr></tbody></table>

**Mega menu level 2**

<table><thead><tr><th width="249">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Mega menu level 2</strong>:</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 text of <strong>Mega menu level 2</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Mega menu level 2</strong>:</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>Font style</td><td><p>Set the font style for the text of <strong>Mega menu level 2</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Italic</strong></li><li><strong>Oblique</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the text of <strong>Mega menu level 2</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Mega menu level 2</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Mega menu level 2</strong>.</td></tr></tbody></table>

**Mega menu level 3**

<table><thead><tr><th width="253">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the text of <strong>Mega menu level 3</strong>:</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 text of <strong>Mega menu level 3</strong> ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the text of <strong>Mega menu level 3</strong>:</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>Text style</td><td><p>Specifies how to capitalize the text of <strong>Mega menu level 3</strong>:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the text of <strong>Mega menu level 3</strong>.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the text of <strong>Mega menu level 3</strong>.</td></tr></tbody></table>

## <mark style="color:blue;">**Product item font**</mark>

**Product title**

<table><thead><tr><th width="256">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the product title:</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 product title ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the product title:</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>Text style</td><td><p>Specifies how to capitalize the product title:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the product title.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the product title.</td></tr><tr><td>Text line</td><td><p>Allows selection of the number of lines displayed for the product title.</p><ul><li><strong>1</strong></li><li><strong>2</strong></li><li><strong>3</strong></li><li><strong>Full</strong></li></ul></td></tr><tr><td>Bottom margin</td><td>Adjust the space between the bottom edge of the product title and the elements or content below it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

**Product vendor**

<table><thead><tr><th width="257">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the product vendor:</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 product vendor ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the product vendor:</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><p></p></td></tr><tr><td>Font style</td><td><p>Set the font style for the product vendor:</p><ul><li><strong>Normal</strong></li><li><strong>Italic</strong></li><li><strong>Oblique</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the product vendor:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the product vendor.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the product vendor.</td></tr><tr><td>Top margin</td><td>Adjust the space between the top edge of the product vendor and the elements or content above it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom margin</td><td>just the space between the bottom edge of the product vendor and the elements or content below it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

**Product price**

<table><thead><tr><th width="258">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the product price:</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 product price ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the product price:</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><p></p></td></tr><tr><td>Line height</td><td>Set the line height to apply to the product price.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the product price.</td></tr><tr><td>Top margin</td><td>Adjust the space between the top edge of the product price and the elements or content above it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)</td></tr><tr><td>Bottom margin</td><td>Adjust the space between the bottom edge of the product price and the elements or content below it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

**Product badges**

<table><thead><tr><th width="259">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the product badges:</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 product badges ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the product badges:</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>Text style</td><td><p>Specifies how to capitalize the product badges:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the product badges.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the product badges.</td></tr><tr><td>Corner radius</td><td>Set the radius of the product badge's corners. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Top padding</td><td>Determines the height of the top inner space of the product badges. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the product badges. Can be from 0px to 50px, increasing arithmetically of 2px (pixel).</td></tr><tr><td>Left/Right padding</td><td>Determines the width of the left and  right inner space of the product badges. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

**Product quick view**

These settings are only applied when the **Quick View style** setting in **Product card** section is set to **Default**.

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font size</td><td>Set the font size to apply to the product quick view ranging from 10px to 100px.</td></tr><tr><td>Line height</td><td>Set the line height to apply to the product quick view.</td></tr><tr><td>Corner radius</td><td>Set the radius of the quick view button's corners. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Top padding</td><td>Determines the height of the top inner space of the quick view button. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the quick view button. Can be from 0px to 50px, increasing arithmetically of 2px (pixel).</td></tr><tr><td>Left/Right padding</td><td>Determines the width of the left and  right inner space of the quick view button. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Show box shadow</td><td>Adds a shadow effect around the quick view button.</td></tr></tbody></table>

**Blog title font**

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the blog title:</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 blog title ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the blog title:</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>Text style</td><td><p>Specifies how to capitalize the blog title:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the blog title.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the blog title.</td></tr></tbody></table>

**Blog info font**

<table><thead><tr><th width="267">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the blog info:</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 blog info ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the blog info:</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>Text style</td><td><p>Specifies how to capitalize the blog info:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the blog info.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the blog info.</td></tr></tbody></table>

## <mark style="color:blue;">**Primary button**</mark>

Apply to all buttons except the 'Add to Cart' and 'Buy It Now' buttons.

<table><thead><tr><th width="271">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the primary button:</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 primary button ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the primary button:</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>Text style</td><td><p>Specifies how to capitalize the primary button:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the primary button.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the primary button.</td></tr><tr><td>Corner radius</td><td>Set the radius of the primary button's corners. Can be from 0px to 30px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Border width</td><td>Determines the thickness of the primary button borders. The range is from 0 to 30px.</td></tr><tr><td>Border style</td><td><p>Select the style for the primary button borders:</p><ul><li><strong>Solid</strong></li><li><strong>Dotted</strong></li><li><strong>Dashed</strong></li></ul></td></tr><tr><td>Show outline</td><td>Display an outline on the right and bottom of the primary button.</td></tr><tr><td>Text alignment</td><td><p>The alignment of the text within the primary button:</p><ul><li><strong>Left</strong> - Aligns the text to the left.</li><li><strong>Center</strong> - Aligns the text in the center.</li><li><strong>Right</strong> - Aligns the text to the right.</li></ul></td></tr><tr><td>Top padding</td><td>Determines the spacing between the primary button text and its top border.</td></tr><tr><td>Bottom padding</td><td>Determines the spacing between the primary button text and its bottom border.</td></tr></tbody></table>

**Box shadow**

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Horizontal length</td><td>Determines how many pixels the box shadow falls horizontally.</td></tr><tr><td>Vertical length</td><td>Determines how many pixels the box shadow falls vertically.</td></tr><tr><td>Blur radius</td><td>Determines how blur the shadow is. </td></tr><tr><td>Spread</td><td>Determines how far the shadow keeps its original thickness from its origin.</td></tr><tr><td>Box shadow color</td><td>Set the color of the shadow.</td></tr><tr><td>Box shadow hover color</td><td>Set the color of the shadow when button is hovered.</td></tr><tr><td>Opacity</td><td>Fill in the desired transparency of the box shadow. </td></tr><tr><td>Inset shadow</td><td>Select whether the shadow will fall inside of button if YES or outside of button if NO.</td></tr></tbody></table>

## <mark style="color:blue;">**Secondary button**</mark>

Apply to 'add to cart' and 'buy it now' buttons on product detail page.

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the secondary button:</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 secondary button ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the secondary button:</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>Text style</td><td><p>Specifies how to capitalize the secondary button:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the secondary button.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the secondary button.</td></tr><tr><td>Corner radius</td><td>Set the radius of the secondary button's corners. Can be from 0px to 30px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Border width</td><td>Determines the thickness of the secondary button borders. The range is from 0 to 30px.</td></tr><tr><td>Border style</td><td><p>Select the style for the secondary button borders:</p><ul><li><strong>Solid</strong></li><li><strong>Dotted</strong></li><li><strong>Dashed</strong></li></ul></td></tr><tr><td>Show outline</td><td>Display an outline on the right and bottom of the secondary button.</td></tr><tr><td>Text alignment</td><td><p>The alignment of the text within the secondary button:</p><ul><li><strong>Left</strong> - Aligns the text to the left.</li><li><strong>Center</strong> - Aligns the text in the center.</li><li><strong>Right</strong> - Aligns the text to the right.</li></ul></td></tr><tr><td>Top padding</td><td>Determines the spacing between the secondary button text and its top border.</td></tr><tr><td>Bottom padding</td><td>Determines the spacing between the secondary button text and its bottom border.</td></tr></tbody></table>

**Box shadow**

<table><thead><tr><th width="279">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Horizontal length</td><td>Determines how many pixels the box shadow falls horizontally.</td></tr><tr><td>Vertical length</td><td>Determines how many pixels the box shadow falls vertically.</td></tr><tr><td>Blur radius</td><td>Determines how blur the shadow is. </td></tr><tr><td>Spread</td><td>Determines how far the shadow keeps its original thickness from its origin.</td></tr><tr><td>Box shadow color</td><td>Set the color of the shadow.</td></tr><tr><td>Box shadow hover color</td><td>Set the color of the shadow when button is hovered.</td></tr><tr><td>Opacity</td><td>Fill in the desired transparency of the box shadow. </td></tr><tr><td>Inset shadow</td><td>Select whether the shadow will fall inside of button if YES or outside of button if NO.</td></tr></tbody></table>

## <mark style="color:blue;">Tertiary</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**button**</mark>

Apply to 'add to cart' buttons.

<table><thead><tr><th width="281">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the tertiary button:</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 tertiary button ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the tertiary button:</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>Text style</td><td><p>Specifies how to capitalize the tertiary button:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the tertiary button.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the tertiary button.</td></tr><tr><td>Corner radius</td><td>Set the radius of the tertiary button's corners. Can be from 0px to 30px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Border width</td><td>Determines the thickness of the tertiary button borders. The range is from 0 to 30px.</td></tr><tr><td>Border style</td><td><p>Select the style for the tertiary button borders:</p><ul><li><strong>Solid</strong></li><li><strong>Dotted</strong></li><li><strong>Dashed</strong></li></ul></td></tr><tr><td>Show outline</td><td>Display an outline on the right and bottom of the tertiary button.</td></tr><tr><td>Text alignment</td><td><p>The alignment of the text within the tertiary button:</p><ul><li><strong>Left</strong> - Aligns the text to the left.</li><li><strong>Center</strong> - Aligns the text in the center.</li><li><strong>Right</strong> - Aligns the text to the right.</li></ul></td></tr><tr><td>Top padding</td><td>Determines the spacing between the tertiary button text and its top border.</td></tr><tr><td>Bottom padding</td><td>Determines the spacing between the tertiary button text and its bottom border.</td></tr></tbody></table>

**Box shadow**

<table><thead><tr><th width="284">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Horizontal length</td><td>Determines how many pixels the box shadow falls horizontally.</td></tr><tr><td>Vertical length</td><td>Determines how many pixels the box shadow falls vertically.</td></tr><tr><td>Blur radius</td><td>Determines how blur the shadow is. </td></tr><tr><td>Spread</td><td>Determines how far the shadow keeps its original thickness from its origin.</td></tr><tr><td>Box shadow color</td><td>Set the color of the shadow.</td></tr><tr><td>Box shadow hover color</td><td>Set the color of the shadow when button is hovered.</td></tr><tr><td>Opacity</td><td>Fill in the desired transparency of the box shadow. </td></tr><tr><td>Inset shadow</td><td>Select whether the shadow will fall inside of button if YES or outside of button if NO.</td></tr></tbody></table>

## <mark style="color:blue;">Page title font</mark>

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font family</td><td><p>Select a font family to apply to the page title:</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 blog title ranging from 10px to 100px.</td></tr><tr><td>Font weight</td><td><p>Set the font weight to apply to the page title:</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>Font style</td><td><p>Set the font style for the text of the page title:</p><ul><li><strong>Normal</strong></li><li><strong>Italic</strong></li><li><strong>Oblique</strong></li></ul></td></tr><tr><td>Text style</td><td><p>Specifies how to capitalize the page title:</p><ul><li><strong>Normal</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li><li><strong>Lowercase</strong></li></ul></td></tr><tr><td>Line height</td><td>Set the line height to apply to the page title.</td></tr><tr><td>Letter spacing</td><td>Set the spacing between letters to apply to the page title.</td></tr></tbody></table>


---

# 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://halosoft.gitbook.io/ella-documentation/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.