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:
Custom fonts are located in:
assets/css/fonts/folder. This is where you add your font files.assets/css/fonts.cssfile. In this file, you import your 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:
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');
}
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.
Last modified 1yr ago