# Upload font

This feature will allow you to upload the custom fonts to the app and apply them to your site. Please follow the below steps:

**Step 1**: Prepare your custom font file with the format are **ttf / woff / otf.** You can find it at <https://www.fonts.com/>, <https://webfonts.ffonts.net/>, <https://www.dafont.com/>...

**Step 2**: From the **App dashboard**, open the **Fonts** tab and click on the **Create new** button to upload your fonts.

<figure><img src="https://1020453834-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhdJXbk3sVdej6liHwp%2Fuploads%2FIA5WCcJSyFf6olpZMpsC%2Fimage.png?alt=media&#x26;token=af314bb9-c4d3-4a69-a462-51953a23e884" alt=""><figcaption></figcaption></figure>

**Step 3**: Click on **Add file** to select your font file and fill in the **Font name** option.

<figure><img src="https://1020453834-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhdJXbk3sVdej6liHwp%2Fuploads%2FjtNLRce3BzfWUfRlsBMg%2Fimage.png?alt=media&#x26;token=403e82f4-763c-40bf-ad95-63ac52acf730" alt=""><figcaption></figcaption></figure>

**Step 4**: Tick the options that you want to assign the font to. For example, I want to change the font for the **headlines**, so I can tick the **Headline 1 to Headline 6** options.

{% hint style="info" %}
You can tick **“All”**  if you want to make changes to all elements of your store.
{% endhint %}

<figure><img src="https://1020453834-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhdJXbk3sVdej6liHwp%2Fuploads%2FDb3jJALBRyLEJp66GVio%2Fimage.png?alt=media&#x26;token=ef089968-df6f-48b7-a6da-4721ae64cf0a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can use ***Element Picker*** if you want to make changes to specific parts of your store. Simply click on the **Polaris icon** to select the elements that you want.
{% endhint %}

<figure><img src="https://1020453834-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhdJXbk3sVdej6liHwp%2Fuploads%2FcVUQrHIgJMA4lpqPeEtl%2Fimage.png?alt=media&#x26;token=479e60dd-ed88-4c33-917a-ada5fa53b412" alt=""><figcaption></figcaption></figure>

You will see your store preview. Hover over the text element and click on the **select** text to select whatever elements you want to apply to the new font. After done for the selection, you can see the class name of the elements that you select in the **Custom Elements** box.

<figure><img src="https://1020453834-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhdJXbk3sVdej6liHwp%2Fuploads%2FGkSDFtyHVDzMa2Mj7SKK%2Fimage.png?alt=media&#x26;token=81877e2d-4902-4685-8207-552e49bcf0a5" alt=""><figcaption></figcaption></figure>

**Step 5**: Tick **Overwrite other fonts** option to overwrite the new font to the font in the Shopify theme. Then click on the **Save** button to upload the new font and apply it to the elements that you selected.

<figure><img src="https://1020453834-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhdJXbk3sVdej6liHwp%2Fuploads%2Fm09Qx1Hxnu9ThB0Pm46l%2Fimage.png?alt=media&#x26;token=cd125aff-ab85-4d44-b61b-d6c9c1fc4d92" alt=""><figcaption></figcaption></figure>

All done, please wait about 1-2 mins and then reload your site to see the result.\
\
Please check the video below for an easier understand.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhdJXbk3sVdej6liHwp%2Fuploads%2FXovSmu2coYJXvOMHFS46%2FUpload.mp4?alt=media&token=da7ee52c-67a3-418b-8d6b-1d724799eda7>" %}
