Step 1. To use this Design Manager, you can go to VPCart administration: Website > Layout Manager
Step 2. Then click the Design manager icon shown in the left panel. Once clicked you will see Design Manager window with tabs named Themes, Custom and Containers
Step 3. Click on Custom tab
Step 4. Under section: Global: You can set Global Font family, global font color, font size etc.
Step 5. By default, there will be three fonts listed. To add new fonts click the button 'Add/Edit Google Font'.
Step 6. Click '+Google Font' button to add more Google fonts.
Step 7. Click on the link 'Click here open Google Fonts List' and it will open a new page with https://fonts.google.com/
Step 8. Search for a font you would like to add. For example, “Charmonman” font. Click the + icon
Step 9. You will see a bottom bar showing “1 Family selected”. Click on it to expand. Please keep this form open, as we need to copy the values under STANDARD and Specify in CSS
Step 10. Copy the value under standard box
Step 11. Go to Design Manager window
Step 12. Paste it into the “Font Link Tag” field
Step 13. Go back to the Google font page. Locate the Specify in CSS box and copy the value eg: font-family: 'Charmonman', cursive;
Step 14. Paste it into the “Font Family” field.
Step 15. Click Save
Step 16. Refresh the Design Manager window and you can see the new font “Charmonman” in the list.
Step 17. Click Close
Step 18. You can now select the new font as your global font and able to preview the changes instantly in Layout manager. You can also modify the Global font colour and size.
Step 19. Click Save and then click ok
Step 20. Once you update the font via Design manager refresh the shop page and you will see the new font
Step 21. Now let us see how to add multiple fonts at a time. For eg. from https://fonts.google.com we have selected fonts 'Lato' and 'Dancing Script'
Step 22. You can see code under 'STANDARD' and two entries under 'Specify in CSS'
Step 23. Copy the code under STANDARD
Step 24. Go to Design Manager window and if you would like you may reset the font to default VPASP font by clicking the 'RESET' button.
Step 25. Click ok to onfirm
Step 26. Click Save
Step 27. Now we can add the two Google fonts we have selected. For this click Add / Edit Google Font button
Step 28. Click +Google Font button
Step 29. In the box Font LInk Tag, paste the code which we have copied from https://fonts.google.com, standard box.
Step 30. In the box Font Family copy and paste the values from https://fonts.google.com, Specify in CSS box. For Font Family Lato enter
font-family: 'Lato', sans-serif;
Step 31. Click +Add Font Family. In the new box add code for font Dancing Script
font-family: 'Dancing Script', cursive;
Step 32. Click Save
Step 33. We can see new Fonts 'Lato' and 'Dancing Script' in the list
Step 34. Click Close
Step 35. Now we can try the new font "Dancing Script" as the Global Font
Step 36. The Shop front end will display new font.
Thank you for watching and we hope you have found this tutorial useful.
For more information about how to use Design Manager to change the look of your site, you can also refer to our VPCart 9 User Guide at
https://helpnotes.vpcart.com/userguide900/#!Documents/howtousethisdesignmanagerfeatureinvpcart.htm