Zero One Documentation
Theme demo
  • Overview
  • Terms & Guidelines
  • Guide
    • Installation & Setup
      • Local environment
      • Server
      • Default language!
      • Multilanguage website
      • Config options
      • SMTP email options
      • Folder structure
      • htaccess
      • Updating
      • PHP Composer
    • Administration panel
      • Translating panel
    • Site options
      • SEO options
      • Multi-language
    • Theme styling
      • Less/CSS setup
      • Changing Less variables
      • app.less file
      • Customizing elements
      • Helpful classes
    • Page types
      • Page options
    • Blog
      • Comments
      • Article
    • Work (Portfolio)
      • Project page
    • Shop
      • Snipcart
    • Layout Builder
      • Column Options block
      • Subgrid block
      • Card block
      • Text (Writer) block
      • Custom Heading block
      • Custom List block
      • Typed Text block
      • Quote block
      • Button block
      • › 25 more blocks
    • Form Builder (Premium)
    • OLD Page Builder deprecation
    • Tricks
      • Using icons in the content
      • Kirbytext link tag to button
      • Tricks with image classes
      • Adding Google Fonts
      • Custom icons
      • Cookie notice/banner
    • Theme extending
      • Page Transitions (Swup)
      • Contact form extending
      • Self-hosted fonts
      • Adding new templates
      • Adding new Content block (Layout Builder)
    • GDPR
  • More
  • Support
  • Hire us
  • Changelog
  • Credits
  • Affiliate
Powered by GitBook
On this page
  • Where?
  • Add fonts
  • Customize assets/css/fonts.css file
  • Set new fonts in the Site Styling tab

Was this helpful?

  1. Guide
  2. Theme extending

Self-hosted fonts

PreviousContact form extendingNextAdding new templates

Last updated 3 months ago

Was this helpful?

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

  • Or here (video)

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:

  • or

Customize assets/css/fonts.css file

The assets/css/fonts.css file is loaded only if 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 -> and compile a new stylesheet, with your new styles.

https://webdesign.tutsplus.com/tutorials/how-to-self-host-google-fonts--cms-34775
https://teamtreehouse.com/library/selfhosted-webfonts
https://transfonter.org/
https://www.fontsquirrel.com/tools/webfont-generator
Fonts URL input
Site Styling tab
Typography section