How to add a new font to CS-Cart

Steps of adding a new font to cs-cart:

1- Upload the new font in any format like .ttf to the theme path
for example: domainname.com/design/themes/responsive/media (responsive is the active theme)
2- Update the schema.json file by going to the fonts-> families section the add the new font as follow:

for example we need to add DroidKufi-Bold.ttf: “DroidKufi-Bold,sans-serif”: “DroidKufi-Bold”

the section will be like this:

“fonts”: {
“families”: {

“DroidKufi-Bold,sans-serif”: “DroidKufi-Bold”,
“‘Open Sans’,’Helvetica Neue’,-apple-system,sans-serif”: “Open Sans”,
“‘Comic Sans MS’,cursive”: “Comic Sans MS”,
“‘Courier New’,Courier,monospace”: “Courier New”,
“Georgia,serif”: “Georgia”,
“Impact,Charcoal,sans-serif”: “Impact”,
“‘Lucida Console’,Monaco,monospace”: “Lucida Console”,
“‘Lucida Sans Unicode’,’Lucida Grande’,sans-serif”: “Lucida Sans Unicode”,
“‘Palatino Linotype’,’Book Antiqua’,Palatino,serif”: “Palatino Linotype”,
“Tahoma,Geneva,sans-serif”: “Tahoma”,
“‘Times New Roman’,Times,serif”: “Times New Roman”,
“‘Trebuchet MS’,Helvetica,sans-serif”: “Trebuchet MS”,
“Verdana,Geneva,sans-serif”: “Verdana”,
“‘Gill Sans’,Geneva,sans-serif”: “Gill Sans”,

3- The last step is to add the new font to the list of the visual theme editor. This step needs to update the file yourstylename.less in the path:domainname.com/design/themes/responsive/style/data/yourstylename.less and add the font to the beginning of the file like this:

@font-face {
font-family: DroidKufi-Bold;
src: url(‘/DroidKufi-Bold.ttf’); /* keep the path as it is */

}

Finally, go to the visual theme editor and go to the fonts section and try to change the font for any list and you will see the font in the list.

That’s it.