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

{% hint style="info" %}
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. Paste text which you have copied to **"Font Name"** Textbox in Font Name Settings.

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FmpuCvBsBLRHyvpsw9gx2%2F1.png?alt=media\&token=4442f1af-6f2d-41da-b347-5b6f3139e57c)

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

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2F1mt1VVO1lyMC7990YuyE%2F11.gif?alt=media\&token=ed6c3afe-b46e-4a88-ac90-3bd4a94bafad)

**Font And Text Typography Settings**

| Setting          | Description                                                                       |
| ---------------- | --------------------------------------------------------------------------------- |
| Select Font Type | Select which font family (#1 or #2) to apply on heading, titles.                  |
| Font Size        | Set the font size to apply on heading, titles ranging from 10px to 100px.         |
| Font Weight      | Set the font weight to apply on heading, titles.                                  |
| Font Style       | Turn the heading, titles to be either normal, capitalize, uppercase or lowercase. |
| Text Transform   | Set the font style on heading, titles to be either normal, italic or oblique.     |
| Line Height      | Set the line height to apply on heading, titles.                                  |
| Letter Spacing   | Set the spacing between letters to apply on heading, titles.                      |
| Border Height    | Set the height of border ( underline ) of heading, titles.                        |

#### Button Settings

| Setting                                  | Description                                                                             |
| ---------------------------------------- | --------------------------------------------------------------------------------------- |
| Border Radius                            | Round the corners of buttons on the range between 0px to 30px.                          |
| Border Width                             | Determines the thickness of buttons' borders. The range is from 0 to 30px.              |
| Border Style                             | Select the style for buttons' borders to be either solid, dotted or dashed.             |
| Text Align                               | Align button text to the left, to the right or center.                                  |
| Padding Top                              | Determines the spacing between button text and its top border.                          |
| Padding Bottom                           | Determines the spacing between button text and its bottom border.                       |
| Box Shadow - Horizontal Length           | Determines how many pixels the box shadow falls horizontally.                           |
| Box Shadow - Vertical Length             | Determines how many pixels the box shadow falls vertically.                             |
| Box Shadow / Blur Radius                 | Determines how blur the shadow is.                                                      |
| Box Shadow - Spread                      | Determines how far the shadow keeps its original thickness from its origin.             |
| Box Shadow - Background Box Shadow       | Set the color of the shadow.                                                            |
| Box Shadow - Background Hover Box Shadow | Set the color of the shadow when button is hovered.                                     |
| Opacity                                  | Fill in the desired transparency of the box shadow.                                     |
| Inset                                    | Select whether the shadow will fall inside of button if YES or outside of button if NO. |