Links
Comment on page

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:

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.
If you have only desktop font versions, you can convert them to web fonts, for example here:

Customize assets/css/fonts.css file

The assets/css/fonts.css file is loaded only if Fonts URL input in Site Styling tab is empty.
Just change the assets/css/fonts.css file to comply with your fonts.
// 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 -> Typography section and compile a new stylesheet, with your new styles.