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.

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

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.