> For the complete documentation index, see [llms.txt](https://www.one.thezero.club/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.one.thezero.club/guide/theme-extending/self-hosted-fonts.md).

# 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.