# Self-hosted fonts

The Zero One theme by default has self-hosted fonts. All you have to do is add yours instead.

If you are new to this subject, you can learn more about it:

* Here <https://webdesign.tutsplus.com/tutorials/how-to-self-host-google-fonts--cms-34775>
* Or here (video) <https://teamtreehouse.com/library/selfhosted-webfonts>

### Where?

Custom fonts are located in:

* `assets/css/fonts/` folder. This is where you add your font files.
* `assets/css/fonts.css` file. In this file, you import your fonts.

### Add fonts

Add your fonts in the `assets/css/fonts/` folder.&#x20;

If you have only desktop font versions, you can convert them to web fonts, for example here:

* <https://transfonter.org/> or
* <https://www.fontsquirrel.com/tools/webfont-generator>

### Customize `assets/css/fonts.css` file

{% hint style="info" %}
The `assets/css/fonts.css` file is loaded only if [Fonts URL input](https://www.one.thezero.club/guide/theme-styling#typography) in Site Styling tab is empty.
{% endhint %}

Just change the `assets/css/fonts.css` file to comply with your fonts.&#x20;

```css
// Default assets/css/fonts.css content

  @font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/Outfit-Light.woff2') format('woff2'),
         url('fonts/Outfit-Light.woff') format('woff'),
         url('fonts/Outfit-Light.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Outfit-Regular.woff2') format('woff2'),
         url('fonts/Outfit-Regular.woff') format('woff'),
         url('fonts/Outfit-Regular.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Outfit-Bold.woff2') format('woff2'),
         url('fonts/Outfit-Bold.woff') format('woff'),
         url('fonts/Outfit-Bold.ttf') format('truetype');
  }

```

### Set new fonts in the Site Styling tab

The only thing left to do is set your new fonts in the [Site Styling tab](https://www.one.thezero.club/guide/theme-styling) -> [Typography section](https://www.one.thezero.club/guide/theme-styling#typography) and compile a new stylesheet, with your new styles.


---

# 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://www.one.thezero.club/guide/theme-extending/self-hosted-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.