# Upload Custom Fonts

{% hint style="info" %}
With some custom code you can add your own fonts to our themes. These fonts **will not** appear in the theme editor as a dropdown option, but instead override the values directly in the stylesheet.
{% endhint %}

#### Generate your font and style files

Upload your custom font files to [Font Squirrel with this tool](https://www.fontsquirrel.com/tools/webfont-generator). TTF file types have the best success. Then click the Download your kit button to get a zip file with the required files.

#### Add the font files to your theme

The first thing that we have to do is to add the fonts to the Shopify store. From there, we can reference it via code and use it in our theme.

<figure><img src="/files/Q4SgGG1nNSlQsTK3evua" alt=""><figcaption></figcaption></figure>

#### Setting the Font

1. From your Shopify admin, navigate to **Settings > Files > Upload file**.
2. Under **snippets**, click on “Add a new snippet” and create a snippet named: **custom-fonts**
3. This is the code we will use:

```
<style>
  @font-face {
  font-family: "fontname";
  src: url('fonturl-eot') format("embedded-opentype"),
       url('fonturl-woff') format("woff"),
       url('fonturl-woff2') format("woff2"),
       url('fonturl-ttf') format("truetype"),
       url('fonturl-svg') format("svg");
   }
  </style>
```

{% hint style="info" %}
&#x20;1\. **the code above has to be modified to work with your font.**

* “**fontname”** = exact name of the font you add.
* “**fonturl**-” = link to the respective font file. So, if your font file has **.woff** and **.woff2**, replace them accordingly on the code above.
  {% endhint %}

In our case, it would look like this:

```
<style>
      @font-face {
      font-family: "Poppins";
  src: url('https://cdn.shopify.com/s/files/1/0439/1577/2000/files/Poppins.ttf?v=1618926445') format("truetype");
   }
  </style>
```

4\. Finally, in the **custom-fonts** snippet that we created, add the following code **before** the **\</style>** line. Don’t forget to also rename **“Poppins”** to whichever font name you’re using:

<pre><code>&#x3C;style>
      @font-face {
      font-family: "Poppins";
  src: url('https://cdn.shopify.com/s/files/1/0439/1577/2000/files/Poppins.ttf?v=1618926445') format("truetype");
   }

   h1,h2,h3,h4,h5,h6,html,body,*,[id] *{
      font-family: "Poppins" !important;
<strong>   }
</strong>  &#x3C;/style>
</code></pre>

#### &#x20;Loading the custom font <a href="#h-final-step-loading-the-custom-font" id="h-final-step-loading-the-custom-font"></a>

Look for an open **theme.liquid** inside your snippets folder. Find the: ***\</body>*** tag, and add the following code:

```
{% include 'custom-fonts' %}
```

<figure><img src="/files/yaI7fzI85uu5xWeO6pgq" alt=""><figcaption></figcaption></figure>


---

# 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://joomlart.gitbook.io/peaks-documentation/extras/upload-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.