Video Tutorial - How to add google font from Design Manager in VPCART 9

Video Tutorial - How to add google font from Design Manager in VPCART 9

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.

User Manual Reference

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


Times Viewed:
516
Added By:
Brian
Date Created:
11/16/2018
Last Updated:
1/1/2020