All Collections
Site
Site > Branding
Adding Custom Fonts
Adding Custom Fonts

This document describes how to add Custom Fonts to your Zenler site

Zenler Support avatar
Written by Zenler Support
Updated over a week ago

While Zenler already offers a diverse range of Google fonts to enhance your site and pages, we understand that sometimes you may have a specific font in mind that you've purchased from a premium font site. With our new Custom Fonts feature, you now have the ability to upload and utilize your own custom fonts seamlessly within Zenler.

Unleash your creativity and give your website a distinctive look with the power of Custom Fonts. By incorporating your personally purchased fonts, you can achieve a completely fresh and unique aesthetic that truly represents your brand or vision. Whether you prefer an elegant script font, a striking display font, or a sleek sans-serif, the possibilities are endless when it comes to customizing your site's appearance.

In addition to the creative freedom Custom Fonts provides, there's another significant advantage: GDPR compliance. We recognize the importance of privacy and data protection for our users. While Google Fonts, with its extensive library, may track user IPs, Custom Fonts in Zenler eliminates this concern entirely. Zenler platform takes the responsibility of delivering the Custom Fonts directly to your site, ensuring a secure and privacy-conscious experience for both you and your visitors.

Zenler Sites support Custom Fonts in Web font format (WOFF or WOFF2). The fonts you download from any website may be in TTF or OTF format. You can convert it using a third-party Web font generator, then use the same on your Zenler site.


How to convert a TTF or OTF file to WOFF or WOFF2 format?

  1. First, obtain the TTF/OTF file for the desired font that you intend to include as a Custom Font. In case you don't possess it, retrieve the font by downloading it (eg: Pogo Font).


    The font will be obtained in the form of a Zip file. After extracting the contents of the Zip file, you will discover the TTF/OTF file within.

  2. Then open a Webfont generator. We recommend https://www.fontsquirrel.com/tools/webfont-generator

  3. Click the button UPLOAD FONTS and choose the TTF/OTF file.
    Check ON the Agreement and then click DOWNLOAD YOUR KIT.
    ​
    The progress of the download is visible.
    ​

    After the download is complete the converted file is saved as webfontkit...


Now the font is converted to Webfont format.

How to upload the custom font to your Zenler site?

  1. Go to Site > Branding > Custom Font and click the button Upload Custom Font

  2. The Upload Custom Web Font ZIP will be shown.

    Enter the title of the Custom Font. This name will be shown when we pull down the Font dropdown.
    Select the converted Webfont and click Start Upload button

  3. After the upload is completed, the font will be listed under the Site > Branding > Custom Font section.

    Now you have successfully uploaded the Custom Font.

  • You can modify the font's title by clicking the pencil button located near the font's title.

  • The eye icon allows you to preview the font at various sizes and displays the letters and numbers supported by the font.

  • To remove the font, simply click on the bin icon.

How can you find your Custom Font?

The Custom Fonts section, where the installed fonts are displayed, can be located by selecting the drop-down menu.
​

You can find the Custom Fonts within the Page Editors and Course curriculum.

NOTE:

  • It is not possible to alter the dimensions of the Custom Font within the dynamic header.

  • When fonts consist of multiple font families, each family is treated as an individual font.

  • To ensure compatibility with non-English languages, kindly download the font specifically designed for the respective language script.

  • If you download the TTF/OTF files, make sure to download them from reliable online sources.

Why is the custom font that I uploaded not working?

  1. The uploaded ZIP file should contain 3 main files with extensions .css,.woff, and .woff2. If any one of them is not found the custom fonts will not work.

  2. If you do not use the correct conversion tool to convert the TTF/OTF file to WOFF/WOFF2 it may not work properly. We recommend the following tool for conversion: https://www.fontsquirrel.com/tools/webfont-generator.

  3. Some font names starting with numbers may not function correctly on Zenler.
    ​

Support for Custom Font in various areas such as Mobile branding, Blog, and Community will be available in the future.


Watch the video:
​


​

Did this answer your question?