# Add custom fonts

<figure><img src="/files/3y678jYdZT3nHzJj8CT3" alt=""><figcaption></figcaption></figure>

In the theme-building process, sometimes you want to use your own font style instead of the options provided by Zest. In this article, you will learn how to do that quickly and efficiently.

### 1. Upload your custom font <a href="#upload-font-and-get-url" id="upload-font-and-get-url"></a>

First, you need to have the custom-font file on your local device.

<figure><img src="https://lh4.googleusercontent.com/hYGPtjRchtZhJW-6Mlg-lAUVfehOFM6j5zgItJL4zTTg5GQRX-jx5T9WsW5D5xqgtxbX1_Ct3bclVULNuJNX4YHotSeOM0cRTGSszx56KNB2Q7_pUcuZGWk4krOl2HVvDOqhETWEsev1X3_I82dKDP8" alt=""><figcaption><p>You need to own an files of the font</p></figcaption></figure>

Then, in Shopify admin, you go to **Files** > **Upload file**

<figure><img src="https://lh5.googleusercontent.com/tPZAbyRcblBfuAjs5s3SOwa_GXQLAjmF1l4Q_baNnrVkkBXntDmLLYjZo6HZMWXxu3pDzd_L9R6dIXTDthsur63JlFwp_bgvUhmkuwLGKssT61ARRmuFHDuMGaRhb2NIjEYFvlYlb5xX4nb_5UiH2q4" alt=""><figcaption><p>Shopify admin => Files => Upload file</p></figcaption></figure>

After selecting the file and uploading it, choose the ( <img src="/files/q2Osdj4H5sFZdH5hK7GE" alt="" data-size="line">) button to copy the URL of your uploaded font.

<figure><img src="https://lh6.googleusercontent.com/fsmilwV4va_Wq17mo4UFuti6PZE6PC2A1hFluTA0LZeKOIQoNuj7kf_GkqIsDp-6-yIDqZLaZsMB_7idQkW1EPS8J2P_SmhqB-DPWUgl7mTeATmBr1i-1ciUP7ZUCQnqPMSOlfqRdcTSNpffoMenGCc" alt=""><figcaption><p>Click the button to get the font url</p></figcaption></figure>

### 2. Initialize font-face in the CSS file

Visit your Shopify admin again, go to **Themes > Edit code** > open **assets/custom.css** file.

<figure><img src="https://lh6.googleusercontent.com/pJauCNXGgW2xBEeQLFtORH9Sg8-lD7uECiBsdwmKjy67MuM_jWWFH0XhpB2fm8Q1X4C93qxDgp13tk4144eEdOap1aNmsYwV49Zylzx4rQS5qr2kSYBk2dk0JnhQr1FDxLjwOMVr1pb1qZXR3101hrc" alt=""><figcaption><p>Access to the assets/custom.css file</p></figcaption></figure>

Copy and paste this CSS code into the file.

```css
@font-face{
  font-family: Name of font ;
  src : url( font-url );
}
```

For example:

```css
@font-face{
  font-family: SofiaSans;
  src : url(https://cdn.shopify.com/s/files/1/0642/0565/2198/files/SofiaSans-Regular.ttf?v=167393855 );
}
```

If you want your font to be bolder, you can use **`font-weight: bold`**

```css
@font-face{
  font-family: SofiaSans;
  src : url(https://cdn.shopify.com/s/files/1/0642/0565/2198/files/SofiaSans-Regular.ttf?v=167393855 );
  font-weight: bold;
}
```

If your font is italic, you can use  [**`font-style: italic`**](#user-content-fn-1)[^1]

```css
@font-face{
  font-family: SofiaSans;
  src : url(https://cdn.shopify.com/s/files/1/0642/0565/2198/files/SofiaSans-Regular.ttf?v=167393855 );
  font-weight: bold;
  font-style: italic;
}
```

### 3. Apply the font to the theme

We have a list of variables that are applied to the entire theme including the heading and body.

For body text:

> \--font-body-family
>
> \--font-body-style
>
> \--font-body-weight

For heading:

> \--font-heading-family
>
> \--font-heading-style
>
> \--font-heading-weight

If you want to apply the font for the body, add this CSS code to the **custom.css** file:

```css
:root
{
--font-body-family : font-name;
--font-body-style : font-style;
--font-body-weight : font-weight;
}
```

For example:&#x20;

```css
:root
{
--font-body-family : SofiaSans;
--font-body-style : italic;
--font-body-weight : bold;
}
```

If you want to apply the font for the heading, add this CSS code to the custom.css file:

```css
:root
{
--font-heading-family : font-name;
--font-heading-style : font-style;
--font-heading-weight : font-weight;
}
```

For example:

```css
:root
{
--font-heading-family : SofiaSans
--font-heading-style : italic;
--font-heading-weight : bold;
}
```

Then, click Save and check the result.

[^1]:


---

# 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://docs.foxecom.com/zest-theme/faqs/generic/add-custom-fonts.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.