# How to add custom fonts

### Uploading your font files

In order to use your own custom fonts, you will first need to upload the font files. To do this, you'll need to head on over to your store's Files folder.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FskzljY8ThLezm76EB7jT%2Fnew%20fonts%20upload.jpg?alt=media&#x26;token=7f9ff89c-b2a6-4753-bf42-6e924af827a6" alt=""><figcaption></figcaption></figure>

You can copy the file links for later.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FvM2T0UXR2HMpUAfDsoDt%2Fnew%20font%20link.jpg?alt=media&#x26;token=fbf3740a-38dd-4fa5-80d7-b5dd7114ffcc" alt=""><figcaption></figcaption></figure>

### Defining the new font families

Now that you have the files uploaded, you can head on over to the '***css-variables.liquid***' file located in the **snippets** folder.

Here you need to scroll all the way to the bottom and add a bit of code **before** the closing style tag (' ***{%- endstyle -%}*** '):

<figure><img src="https://content.gitbook.com/content/z8oqtXqtdhOM4CxRzekr/blobs/ikgg0xdzeVKjS7x3fJTZ/varibles-liquid.png" alt=""><figcaption></figcaption></figure>

This is the place where you need to add this code snippet:

```
/* -- code to use Gotham font-family in theme -- */
@font-face {
  font-family: 'Gotham';
  src: url('WOFF2 link from files placeholder') format("woff2");
  font-weight: normal;
  font-style: normal;
} /* - end - */
```

In this code snippet, you can start by replacing the font family name ('**Gotham**') with your own font name.\
\
Next, add the file link you copied in the 'url()' field, replacing the placeholder text. If you're using a different format, make sure to change that too.

{% hint style="success" %}
If you have to upload more than one font, you need to declare each one individually and use multiple instances of this code snippet.
{% endhint %}

### Assigning your custom fonts

Finally, all we need to do is assign the new fonts to be used. There are a few global font variables that control the fonts for the **headings, body text, buttons, and navigation menu**.

You can easily find all of them by using `command + f` (or `ctrl + f` on Windows) and searching for '***font-stack***':

<figure><img src="https://content.gitbook.com/content/z8oqtXqtdhOM4CxRzekr/blobs/2JfJOXzS7z8Hmxc3OZrE/font-stack.png" alt=""><figcaption></figcaption></figure>

All you need to do here is to replace the first value assigned to the variables you're looking to change.

We'll continue to use '**Gotham**' in our example to keep it consistent, but this is also a place where you input your **custom font name**:

<figure><img src="https://content.gitbook.com/content/z8oqtXqtdhOM4CxRzekr/blobs/fe7GundhWnnZNitYLcG6/gotham.jpg" alt=""><figcaption></figcaption></figure>

That's it, you're all set and ready to go. Just don't forget to save the changes.