# Add custom font

{% hint style="danger" %}
**Our support&#x20;**<mark style="color:red;">**doesn’t cover**</mark>**&#x20;issues caused by adding and using a custom font.**\
**The amount of support for custom fonts is limited to this topic only.**
{% endhint %}

Custom fonts are those you can’t choose from the font selector in the theme’s [**Typography**](/aurora-theme/theme-settings/typography.md) settings. You can add them only by changing the theme code. Note, that adding a custom font disables the standard font selectors in the theme’s Typography settings. To be able to use the default fonts again, you’ll need to discard the code changes.<br>

To add a custom font to the theme code, follow the steps below:

1. Get the webfont version of your custom font. Webfonts have **WOFF** or **WOFF2** file types (not TTF or OTF). [Learn more about webfonts](https://fonts.google.com/knowledge/glossary/web_font).<br>
2. Upload the font file to the **Content > Files** folder in your admin. For example, `Flavellya.woff2`

<figure><img src="https://lh7-us.googleusercontent.com/wl5VGLn3ClbqEIbnoGz19kBQSYxccgw1qfLQxHPD9u0N22Z-bsj4Jwl6Xbf0SVEtQI8GRU1Dj4UA7R1OT5gv0A85BKqzPQcuHhy3I1pTeLYkS6SjjqJ5S72oFmjpHimOOCmHNKIv8Pj_REEexAA-3L4" alt=""><figcaption><p>Adding custom font file to the file storage in your admin </p></figcaption></figure>

3. Select the three dots next to the theme name and choose **Edit code** in the theme actions list. Don’t forget to duplicate the theme before editing its code to have a backup copy.<br>
4. In the search box, enter **css-variables.liquid** to find the corresponding file.<br>
5. Add the code snippet to the file. Place it between the strings <mark style="color:red;">`{% style %}`</mark> and <mark style="color:red;">`:root`</mark> as shown in the screenshot below. Don’t forget to replace <mark style="color:red;">`Flavellya`</mark> with your font name and <mark style="color:red;">`woff2`</mark> (in two places) with your font file type.

{% code fullWidth="false" %}

```liquid
@font-face {
font-family: "Flavellya";
src: url("{{ 'Flavellya.woff2' | file_url }}") format("woff2");
}
```

{% endcode %}

<figure><img src="https://lh7-us.googleusercontent.com/VlxzL3CWedOSLBb87xxav7TQMumYfdRil9fYtJyd-r8BgTf7lOfdz5hvxa-szDREmgf31lObBoDryL8ci8B_6EFlFJwErWHk9s-5XuIRvKH0gLIjmRjK0s_9SCj-mXo7rhPbT5xJUCfgm3WfNhZ8e9c" alt=""><figcaption><p>Adding code snippet to the theme file</p></figcaption></figure>

6. In the same file, find the theme element you want to apply the custom font to, for example:\ <mark style="color:red;">`/* headings */`</mark>, and the font-family property for this element, for example,\ <mark style="color:red;">`--gsc-headings-font-family`</mark>.<br>
7. Replace the value of the font-family property with your custom font name, for example, <mark style="color:red;">`"Flavellya"`</mark> as shown in the screenshot below.<br>

   <figure><img src="https://lh7-us.googleusercontent.com/r9Qlhyb527gtg6MuOjdkaUeU5rhGf9SwKtKnaRTisbMMoOHqYiG99jpAA-GnERGeRlhCBue0aeizpLevC5DeSPpZQBvVitA35rfcDcGDjo1JtudexYfgtV8zDx1M47xz5nf944MI-YRr1ppJ8fM8R2s" alt=""><figcaption><p>Replacing font-family property value with custom font name<br></p></figcaption></figure>
8. **Save** the changes.


---

# 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://getsitecontrol.gitbook.io/aurora-theme/tutorials/add-custom-font.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.