# 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="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FwqgnQXL0pXW2q1JCLZFH%2FScreenshot_8.png?alt=media&#x26;token=2c469aa3-3d8b-45f1-b380-a365de5f3a42" 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="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2F1QCPYwZYXHJRK9rpUUV2%2FScreenshot_9.png?alt=media&#x26;token=c59ef9dd-c2d6-42cb-ad7f-969c508a23e0" alt=""><figcaption></figcaption></figure>
