Cookies are used on this site to provide the best user experience. If you continue, we assume that you agree to receive cookies from this site. OK

How to set up fonts in CS-Cart HTML5 Product Designer?


What font files can I use?

The possibility of adding custom text on a product is one of the main aims of this product customization tool. The wide range of different fonts gives your customers a chance to make great design projects through your online store. By default, HTML5 Product Designer CS-Cart add-on has no fonts, colors, and cliparts. 

But you can add your fonts in the Product Designer library. To upload extra font in HTML5 Product Designer add-on, you should first make sure that it has .woff extension. Only .woff files can be uploaded into this HTML5 Product Designer tool for CS-Cart. Use this service to convert .ttf or .otf fonts to WOFF format and back to .ttf and .otf files. This service is used here as an example. 


How can I create a new font category?

Each font belongs to a specific font category. You can organize all fonts in your HTML5 Product Designer library into several font categories: business, creative, kids, mystic and etc. These font categories you create by yourself. By default, HTML5 Product Designer add-on has only one font category, named "main". 

To create a new font category, go to Website -> Product Designer -> Font categories. Then press Plus button and fill out the fields into the appeared window.

  • Name - the name of your font category;
  • Position - the place in the list of all font categories. Was it be on the top of the font categories list or in the middle. Specify its place in the list;
  • Status - Active - font category will be available to work with. Disabled - unavailable to work with.


How to add a new font?

To add one or more additional fonts, in the admin panel go to Website -> Product Designer -> Fonts

Click on the Plus button and a new window will be appeared. Fill out all required fields.

Be attentive! Product designer can use only fonts with WOFF extension. It is possible to create them using next service: https://andrewsun.com/projects/woffjs/woffer-woff-font-converter/

  • Name - enter the font name.
  • Font categories - assign the font to the existing font category. You can select more than one variant here. Ex. Font Arial can be assigned to business, main and standard font categories. 
  • Status - Active - your customers will see the font in the font list in the storefront. Disabled - the font will be invisible for your customers in the storefront.
  • Position - the order in the font list in the admin panel.
  • Font - upload .woff file here by choosing where do you want to upload font from local, server, url.
  • Preview image - you may upload a font image to show how it will look like on the product if the customer selects this font. 

Press Save button. The extra font should be added in the HTML5 Product Designer add-on.


How can I set up font category for a certain product?

As the administrator, you can define what font categories will be available for customers in the storefront for a certain product. In the CS-Cart admin panel, go to a certain product page. Choose Product Designer tab. You can see the Product Designer panel there. Have a look at Font option.

Font - from the drop-down list you can choose one of your created font categories. Fonts from a chosen category will be available for you/customers to choose from for text editing. Select the category "All" or the necessary font category. Unfortunately, you can not select several font categories at the same time. 

Please, remember press Save button.



P.S. If you did not find the necessary information, please, check other sections:


  • The installation/upgrade of CS-Cart "HTML5 Product Designer" add-on
  • Main options of CS-Cart "HTML5 Product Designer" add-on 
  • Admin panel. Features of CS-Cart HTML5 Product Designer tool.
  • How to activate HTML5 Product Designer tool for a specific product?
  • How to set colors to canvas and elements?
  • How to use cliparts in HTML5 Product Designer?
  • How to create a product for the further customization?
  • How to calculate the Ratio correctly?
  • How to add a product side and a canvas?
  • How to create and use options for customizable products?
  • The printable image and order details page features.

    This instruction refers to our CS-Cart module Product Designer maker.

    online design maker